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; }
}