container
.container {
display:
grid;
/* or inline-grid */
}
Sections:
> grid-template-columns,
/* These properties define the number and sizes of columns and rows.
NOTE: Use the repeat() function to set a repeated number of sizes. */
.container
{
grid-template-columns:
;
grid-template-rows:
;
}
/* grid-template-areas lets you assign custom names to different areas within the grid. Grid areas can occupy any space surrounded by four grid lines. */
.container {
grid-template-columns:
1fr 3fr 1fr;
grid-template-rows:
1fr 2fr 1fr;
grid-template-areas:
"
"
"
"
"
";
}
/* grid-area positions an item in a defined area. */
.item 1 {
grid-area:
;
}
.item 2 {
grid-area:
;
}
.item 3 {
grid-area:
;
}
.item 4 {
grid-area:
;
}
.container {
grid-template-columns:
1fr 4fr;
grid-template-rows:
1fr 3fr;
grid-template-areas:
"header header"
"sidebar content";
}
/* For more control, you can set an item's grid-area value to the names of the four surrounding lines, like this:
row-start / column-start / row-end / column-end
This way the position of items is not restricted to specific areas and items can overlap each other (arrange overlapping items with z-index).
NOTE: Each grid line can have more than 1 name depending on the layout of the grid-template-areas in the container. */
.item 1 {
grid-area:
/
/
/
;
z-index:
;
}
.item 2 {
grid-area:
/
/
/
;
z-index:
;
}
.item 3 {
grid-area:
/
/
/
;
z-index:
;
}
.container {
grid-template-columns:
1fr 1fr;
grid-template-rows:
2fr 1fr;
}
/* grid-area is shorthand for grid-column and grid-row. In any case you can use the grid line numbers instead of their names to set an items position.
NOTE: Positive numbers count from left-to-right and top-to-bottom; Negative numbers count from right-to-left and bottom-to-top. */
.item1 {
grid-colum:
/
;
grid-row:
/
;
z-index:
;
}
.item2 {
grid-colum:
/
;
grid-row:
/
;
z-index:
;
}
/* Instead of specifying the last line, you can use span to set the number of spaces for the item to occupy. The default value is "span 1" if the second value is omitted. */
.item3 {
grid-colum:
/ span
;
grid-row:
/ span
;
z-index:
;
}
/* NOTE: grid-column is shorthand for grid-column-start and grid-column-end, and grid-row is shorthand for gid-row-start and grid-row-end. */
/* gap sets the size of the spaces between the items. A second value can be added to specify different sizes for row gaps and column gaps. */
.container {
gap:
;
}
/* NOTE: gap is shorthand for row-gap and column-gap. */
/* When the grid does not take up the available horizontal space of its grid container (E.g. The width of the grid-items is set to a non-flexible unit like px), justify-content aligns it along the inline (row) axis. */
.container {
justify-content:
;
}
.container .item {
width:
50px;
}
/* NOTE: place-content is shorthand for justify-content and align-content. */
/* When the grid does not take up the available vertical space of its grid container (E.g. The height of the grid-items is set to a non-flexible unit like px), align-content aligns it along the block (column) axis. */
.container {
align-content:
;
}
.container .item {
height:
50px;
}
/* NOTE: place-content is shorthand for justify-content and align-content. */
/* Aligns all grid items along the inline (row) axis. */
.container {
justify-items:
;
}
.container .item {
min-width:
50%;
}
/* NOTE: place-items is shorthand for justify-items and align-items. */
/* Aligns all grid items along the block (column) axis. */
.container {
align-items:
;
}
.container .item {
min-height:
50%;
}
/* NOTE: place-items is shorthand for justify-items and align-items. */
/* Aligns the selected item along the inline (row) axis. */
.item-a {
min-width:
min-content;
justify-self:
;
}
/* NOTE: place-self is shorthand for justify-self and align-self. */
/* Aligns the selected item along the inline (row) axis. */
.item-a {
min-height:
min-content;
align-self:
;
}
/* NOTE: place-self is shorthand for justify-self and align-self. */