Grids
CSS Grid is a two-dimensional grid-based layout system that uses rows, columns, and gaps to organize content on a web page. This system helps with creating a responsive layout for web pages without having to use positioning, floats, or flexbox.
Grid Elements
A grid layout consists of a parent element, with one or more child elements.
<div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div></div>
An HTML element becomes a grid container when its display
property is set to grid
or inline-grid
:
.grid-container {display: grid;}
All the nested elements inside the grid container element are called grid items. In the example above, each item is given a class
of grid-item
to further emphasize this point.
The difference between the values inline-grid
and grid
is that the inline-grid
will make the element inline while grid
will make it a block-level element.
- Grid columns are the vertical lines of the grid items.
- Grid rows are the horizontal lines of grid items.
- Grid gaps are the spaces between each column/row.
Grids
- grid
- Shorthand for setting multiple grid property values.
- grid-area
- A property used to identify an element within a grid template or specify the location of an element within a grid.
- grid-auto-columns
- A property that specifies the default column size(s) for a container.
- grid-auto-rows
- A property that specifies the default row size(s) for a container.
- grid-column
- Specifies the span of content over a set of columns within a grid framework.
- grid-column-end
- Specifies the end of a content span over a set of columns within a grid framework.
- grid-column-gap
- Specifies the spacing between column elements within a grid framework.
- grid-column-start
- A property that specifies the start of a content span over a set of columns within a grid framework.
- grid-gap
- Specifies the spacing between grid elements within a grid framework.
- grid-row
- Specifies the span of content over a set of rows within a grid framework.
- grid-row-end
- Specifies the end of a content span over a set of rows within a grid framework.
- grid-row-gap
- A property that specifies the spacing between row elements within a grid framework.
- grid-row-start
- A property that specifies the start of a content span over a set of rows within a grid framework.
- grid-template
- A shorthand for the grid-template-row, column and areas properties. The grid-template syntax allows for a condensed specification of a grid structure and the location of elements.
- grid-template-areas
- Defines a grid template by referencing the names of the grid areas.
- grid-template-columns
- A property that specifies the column structure of a grid container.
- grid-template-rows
- A property that specifies the row structure of a grid container.
All contributors
- garanews209 total contributions
- Not-Ethan48 total contributions
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- garanews
- Not-Ethan
- christian.dinh
- Anonymous contributor
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.