Grid in CSS – What Is CSS Grid Layout Module?
The CSS Grid Layout Module makes browsers display the selected HTML elements as grid box models.
Grid allows you to easily resize and reposition a grid container and its items two-dimensionally.
- "Two-dimensionally" means grid modules allow simultaneous laying out of box models in rows and columns.
- Use Flexbox if you only need to resize and reposition elements one-dimensionally.
Grid Container vs. Grid Item: What's the Difference?
A grid container is an HTML element whose display
property's value is grid
or inline-grid
.
A grid item is any of the direct children of a grid container.
What Is a grid
Value in CSS?
grid
tells browsers to display the selected HTML element as a block-level grid box model.
In other words, setting an element's display
property's value to grid
turns the box model into a block-level grid layout module.
Here's an example:
- CSS
- HTML
section {
display: grid;
background-color: orange;
margin: 10px;
padding: 7px;
}
div {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</section>
<section>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</section>
The snippet above used the grid
value to convert the HTML document's <section>
elements from regular <section>
nodes to block-level grid box models.
- The
display: grid
directive creates only a single-column grid container. Therefore, the grid items will display in the normal layout flow (one item below another). - The
grid-template-rows
andgrid-template-columns
articles discuss how to add multiple rows and columns. - Converting a node to a grid box model makes the element's direct children become grid items.
- The
display: grid
directive only affects a box model and its direct children. It does not affect grandchildren nodes.
Let's now discuss the inline-grid
value.
What Is an inline-grid
Value in CSS?
inline-grid
tells browsers to display the selected HTML element as an inline-level grid box model.
In other words, setting an element's display
property's value to inline-grid
turns the box model into an inline-level grid layout module.
Here's an example:
- CSS
- HTML
section {
display: inline-grid;
background-color: orange;
margin: 10px;
padding: 7px;
}
div {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</section>
<section>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</section>
The snippet above used the inline-grid
value to convert the HTML document's <section>
elements from regular <section>
nodes to inline-level grid box models.
- Converting a node to a grid box model makes the element's direct children become grid items.
- The
display: inline-grid
directive only affects a box model and its direct children. It does not affect grandchildren nodes.
Properties for Specifying a Grid's Layout
On converting a regular HTML element to a grid (or inline-grid) box model, the grid layout module provides two categories of properties for positioning the grid box and its direct children:
- Grid container's properties
- Grid item's properties
What Are the Grid Container's Properties?
A grid container's properties specify how browsers should layout items within the grid box model.
We define a grid container's property on the container, not its items.
The eight (8) types of grid container properties are:
grid-template-columns
grid-template-rows
grid-auto-columns
grid-auto-rows
justify-content
justify-items
align-content
align-items
Explicit grids are the grids (rows or columns) you explicitly define with the grid-template-columns
or grid-template-rows
property.
Implicit grids are the grids browsers create automatically. We use the grid-auto-columns
and grid-auto-rows
properties to specify track sizes for implicit grids.
What Are the Grid Item's Properties?
A grid item's properties specify how browsers should layout a specified item within the grid box model.
We define a grid item's property on the item, not its container.
The ten (10) types of grid item properties are:
justify-self
align-self
grid-column-start
grid-column-end
grid-column
grid-row-start
grid-row-end
grid-row
grid-area
grid-template-areas
Overview
This article discussed what a CSS grid is. We also discussed the differences between a grid container and grid items.