Grids

garanews's avatar
garanews's avatar
garanews
Published Aug 8, 2021Updated Oct 31, 2022
Contribute to Docs

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

Contribute to Docs

Learn CSS on Codecademy