CSS Grid Generator

This online tool generates a basic CSS Grid code to make dynamic layouts.

CSS Grid Generator

Provide your grid configuration and hit Please may I have some code button and voila! You will have your CSS style ready to be copied.

.parent {
  display: grid;

  grid-template-columns: 50px 1fr 3fr 1fr 50px;

  grid-template-rows: 75px 1fr 75px;

  grid-column-gap: 0px;

  grid-row-gap: 0px;

  .div1 { grid-area: 1 / 1 / 2 / 6; }
  .div2 { grid-area: 2 / 1 / 3 / 2; }
  .div3 { grid-area: 2 / 2 / 3 / 3; }
  .div4 { grid-area: 2 / 3 / 3 / 4; }
  .div5 { grid-area: 3 / 2 / 4 / 5; }
  .div6 { grid-area: 3 / 5 / 4 / 6; }
}

The CSS background-image property as an anti-pattern

Andrew Welch:

There are some seri­ous down­sides to using the CSS background-image prop­er­ty, and more impor­tant­ly, we have bet­ter ways to imple­ment images in our browsers today. Time is now to ditch background-image from your toolset and use <picture> tag instead.

Old way:

1
2
3
<div style="background-image: url('/some/man-with-a-dog.jpg'); 
            background-size: cover;">
</div>

New Way:

1
2
3
4
5
<picture>
  <img src="/some/man-with-a-dog.jpg"
       alt="Man with a dog"
       style="object-fit: cover;" />
</picture>

Measuring attributes of DHTML object every web developers should know

This is an informative chart I found explaining all dimension and location attributes of HTML elements. You will find this chart very handy while positioning or adjusting the location of HTML elements using javascript or through the stylesheet.

Measuring attributes of DHTML object every web developers should know

Measuring attributes of DHTML object every web developers should know

Link:
Measuring Element Dimension and Location