DEV Community

davidka7
davidka7

Posted on

The CSS Grid Functionality

Have You Ever Made A grid in CSS format? It makes It think a little more simple if you're used to working in excel.
For example
.box {
display: grid;
grid-template-columns: 50% 50%
grid-template-rows: 50% 50%
}

You can skip all that position display and margin as well as padding if you just set a number in the row or column and put in the exact spot up to the numbers on the template.
.box-child {
grid-row: 2;
grid-column: 2;
}
This would put it in the second percentage to the right and the second percentage to bottom

Top comments (0)