Notes Published Tagged #cssgrid

View Everyone's Published Notes

grid

.grid-container { display: grid; grid-template-columns: 150px 150px 150px; grid-template-rows: 150px 150px; } .item { grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; }

**use fr instead of percentage or px!!!

grid-template-columns: 29% 66%; /* two columns */

grid-template-rows: 100%; /* one row */

*******************

grid-row-start: 1;

grid-column-start: 2;

grid-row-end: 4;

grid-column-end: 5;

//shorthand for the above:

 //grid-row-start, grid-column-start, grid-row-end, grid-column-end

 grid-area: 1 / 2 / 4 / 5;

show more