CSS Grid Layout
CSS Grid Layout
A grid is a set
of intersecting horizontal and vertical lines defining columns and rows.
Elements can be placed onto the grid within these column and row lines. CSS
grid layout has the following features:
CSS Grid Layout excels
at dividing a page into major regions or defining the relationship in terms of
size, position, and layer, between parts of a control built from HTML
primitives.
It is a new and
powerful CSS layout system that allows dividing a web page’s content into rows
and columns in an easy way.
Like tables,
grid layout enables an author to align elements into columns and rows. However,
many more layouts are either possible or easier with CSS grid than they were
with tables. For example, a grid container's child elements could position
themselves so they overlap and layer, similar to CSS positioned elements.
Grid
container
We create
a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this, all direct
children of that element become grid items.
In this
example, I have a containing div with a class of wrapper, and, inside are five
child elements. I make the .wrapper a grid container.
HTML
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
CSS
.wrapper {
display: grid;
}
The grid property
is a shorthand property for:
|
Property |
value |
Description |
|
display |
block;
inline; inline-block; flex; inline-flex; grid; inline-grid; flow-root; none; block
grid; |
Sets whether an element is treated as a block or inline element and
the layout used for its children, such as flow layout, grid, or flex |
|
grid-template-columns |
inherit;
initial; revert; revert-layer; unset; |
Used to define the line names and track sizing functions of the grid
columns. |
|
grid-template-rows |
inherit;
initial; revert; revert-layer; unset; |
Used to define the line names and track sizing functions of the
grid row. |
|
grid-template-areas |
inherit;
initial; revert; revert-layer; unset; |
Used to specify named grid area, establishing the cells in
the grid and assigning them names. |
|
grid-template |
inherit;
initial; revert; revert-layer; unset; |
Used to define grid columns, rows, and areas. |
|
grid-auto-columns |
inherit;
initial; revert; revert-layer; unset; |
Used to specify the size of an implicitly-created grid
column track or pattern of tracks. |
|
grid-auto-rows |
inherit;
initial; revert; revert-layer; unset; |
Used to specify the size of an implicitly-created grid row track
or pattern of tracks. |
|
grid-auto-flow |
inherit;
initial; revert; revert-layer; unset; |
Used to control how the auto-placement algorithm works,
specifying exactly how auto-placed items get flowed into the grid. |
|
grid |
inherit;
initial; revert; revert-layer; unset; |
Used to sets all of the explicit and implicit grid properties in
a single declaration. |
|
grid-row-start |
inherit;
initial; revert; revert-layer; unset; |
Used to specify a grid item's start position within the grid row
by contributing a line, a span, or nothing (automatic) to its grid placement,
thereby specifying the inline-start edge of its grid area. |
|
grid-column-start |
inherit;
initial; revert; revert-layer; unset; |
Used to specify a grid item's start position within the grid
column by contributing a line, a span, or nothing (automatic) to its grid
placement. This start position defines the block-start edge of the grid
area. |
|
grid-row-end |
inherit;
initial; revert; revert-layer; unset; |
Used to specify a grid item's end position within the grid row by
contributing a line, a span, or nothing (automatic) to its grid placement,
thereby specifying the inline-end edge of its grid area. |
|
grid-column-end |
inherit;
initial; revert; revert-layer; unset; |
Used to specify a grid item's end position within the grid column
by contributing a line, a span, or nothing (automatic) to its grid placement,
thereby specifying the block-end edge of its grid area. |
|
grid-row |
inherit;
initial; revert; revert-layer; unset; |
Used to specify a grid item's size and location within the grid
row by contributing a line, a span, or nothing (automatic) to its grid
placement, thereby specifying the inline-start and inline-end edge of the grid
area. |
|
grid-column |
inherit;
initial; revert; revert-layer; unset; |
Used to specify a grid item's size and location within a grid
column by contributing a line, a span, or nothing (automatic) to its
grid placement, thereby specifying the inline-start and inline-end edge of
its grid area. |
|
grid-area |
inherit;
initial; revert; revert-layer; unset; |
specifies a grid item's size and location within a grid by
contributing a line, a span, or nothing (automatic) to its grid placement, thereby
specifying the edges of its grid area. |
Leave a comment
No Cmomments yet