Grids
Anonymous contributor
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.
Contribute to Docs
- 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.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours