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.
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.
A display property’s grid (or inline-grid) value creates a grid container and grid items
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:
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.
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:
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.
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.
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
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.
The ten (10) types of grid item properties are: