Grid Layout
The Future of CSS Has Come
CSS GRID MODULE was developed by the CSS Working Group in 2017
ADVANTAGES
of GRID Module
CSS Grid is optimized for two-dimensional templates
CSS Grid is one of the most powerful CSS modules ever presented.
Easy - it is more easily for developers and designers to work and collaborate with each other
DISADVANTAGES
of GRID Module
Limited Browsers
Bloated Markup (sometimes)
BASE Terminology
of GRID Module
CONTAINER
This is the direct parent for all grid elements.
ELEMENT
Child elements (direct descendants) of the container.
Grid line
They can be vertical (“column lines”) or horizontal.
TRACK
The space between two adjacent lines.
GRID CELL
The space between the lines of two adjacent rows and two adjacent columns.
GRID AREA
Common space surrounded by four lines
display: grid;
grid-template-rows: 10% 1fr 2fr 12em;
grid-template-columns: 10% 1fr 2fr 12em;
repeat();
grid-template-columns: 1fr 1fr 1fr 1fr;
===
grid-template-columns: repeat(4, 1fr);
grid-row-start: 1; grid-row-end: 1;
grid-column-start: 1; grid-column-end: 1;
==
grid-row: 1/2, grid-column: 1/4;
Naming Grid Lines
grid-template-row: [row1-start] 50px [row2-start] 1fr [row3-start] 80px [row3-end];
grid-template-columns: [col1-start] 120px [col2-start] 1fr [col3-start] 80px [col3-end];
.item{
grid-row: [row1-start] / [row3-start];
grid-column: [col2-start] / [col3-end];
}
GAP
grid-column-gap: 10px;
grid-row-gap: 15px;
grid-gap: 10px 15px;
Explicit and Implicit Grids
Explicit grid uses grid-template-rows и grid-template-columns
Implicit grid uses grid-auto-flow, grid-auto-rows и grid-auto-columns
grid-auto-columns: 60px;
grid-auto-rows: 90px;
CSS GRID Alignment
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
