CSS Grid is used to control the layout and make that layout responsive in some code. In this article, we have covered the grid completely; hence, we have divided this article into two parts to make it easier for you to understand.
Let's get started.
What is a CSS grid?
CSS easily controls the grid layout and makes the layout responsive without the use of media queries. When you set grid values for a layout, it arranges the layout in a grid, so you can set the column and row sizes as you want.
Before diving into CSS Grid, let's learn some basic grid terms. This will make it easier for you to understand CSS grid concepts.
- Grid container
- Grid item
- Grid line
- Grid cell
- Grid track
- Grid area
- Grid gap
- Grid column
- Grid row
Grid container
When you set the display property to the grid for any container in your document, that container becomes a "grid container".
Grid item
A grid item is any direct child of a grid container. When you create a grid for a parent, all the first children of that parent automatically become grid items placed inside the grid. However, it's important to remember that only the first child of any parent matters.
Grid line
Grid lines also known as "column separators" or "row separators", divide each cell, row, and column in a spreadsheet.
The vertical lines are described as "column lines", and the horizontal lines are described as "row lines."
When placing the grid item in the grid container, it is important to see the line number.
To check the line number of the grid container, open the browser where your grid project is opened. Right-click on the grid area, then select "Inspect" from the context menu. In the browser's developer tools, locate the HTML section where your grid structure is defined. Click on the grid element within the HTML section. As you click on the grid, the line numbers corresponding to the grid will be displayed in the browser.
And it will look like this:
4 lines in this example
Grid cell
A grid cell is any cell within the grid. It's just like a table cell.
Grid track
A grid track is a space between two grid lines. This space can be horizontal or vertical.
Grid area
A grid area is any defined rectangular area within the grid that covers more than one cell.
Grid Gap
The space between each column and row is referred to as a gap.
Grid Columns
The grid's vertical lines are referred to as columns.
Grid Rows
The grid's horizontal lines are referred to as rows.
To make any element a grid, you must assign the display property a value of grid or inline-grid in the HTML element. Using display: grid will create a block grid container, while display: inline-grid will create an inline grid container.
The grid value is shown below as an example.
<head>
<style>
.container-1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-color: steelblue;
padding: 10px;
}
.container-2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
background-color: steelblue;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 5px;
font-size: 25px;
}
</style>
</head>
<body>
<h1>The Display: Grid</h1>
<div class="container-1">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
</div>
<br>
<div class="container-2">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
</div>
</body>
You can use the repeat() function to simplify repetitive value assignments. For example, instead of repeating "1fr 1fr 1fr 1fr" four times, you can use "repeat(4, 1fr)".
The repeat () function makes it easy to repeat values in grid-template-columns and grid-template-rows.
The inline-grid value is shown below as an example.
<head>
<style>
.container {
display: inline-grid;
grid-template-columns: repeat(3, 1fr);
background-color: steelblue;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 5px;
font-size: 25px;
}
</style>
</head>
<body>
<h1> The Display: Inline-grid</h1>
<div class="container">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
<div class="items items-7"> 7. Box </div>
<div class="items items-8"> 8. Box </div>
<div class="items items-9"> 9. Box </div>
</div>
</body>
Let's learn about all the properties of a grid using the best examples.
Grid-template-columns Property
The grid-template-columns property sets the number and size of columns in a grid. You can define column sizes individually using multiple values.
none: Default value, indicating no explicit columns are defined.
auto: Column size is determined based on the content and element.
length: Sets the column size to a specific length (e.g., pixels, percentage).
max-content: All columns are sized based on the largest content within each column.
min-content: All columns are sized based on the smallest content within each column.
Syntax:
grid-template-columns: none | auto | length | max-content | min-content;
The none, auto, and length values are shown below as an example.
<head>
<style>
.container-1 {
display: grid;
grid-template-columns: none;
background-color: steelblue;
padding: 10px;
}
.container-2 {
display: grid;
grid-template-columns: auto auto auto 900px;
background-color: steelblue;
padding: 10px;
}
.container-3 {
display: grid;
grid-template-columns: 20% auto;
background-color: steelblue;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 15px;
font-size: 20px;
}
</style>
</head>
<body>
<h1> The Grid-template-columns none value </h1>
<div class="container-1">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
</div>
<h1> The Grid-template-columns auto and length value </h1>
<div class="container-2">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
</div>
<h1> The Grid-template-columns length & auto value </h1>
<div class="container-3">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
</div>
</body>
The max-content and min-content values are shown below as an example.
<head>
<style>
.container-1 {
display: grid;
grid-template-columns: max-content;
background-color: steelblue;
padding: 10px;
}
.container-2 {
display: grid;
grid-template-columns: min-content;
background-color: steelblue;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<h1> The Grid-template-columns max-content value </h1>
<div class="container-1">
<div class="items items-1"> 1. Box Lorem ipsum dolor sit amet. </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
</div>
<h1> The Grid-template-columns min-content value </h1>
<div class="container-2">
<div class="items items-1"> 1. Box Lorem ipsum</div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
</div>
</body>
Grid-template-rows Property
The grid-template-rows property is employed to define the number and size of rows within a grid layout. It can accept multiple values, each specifying the size of the respective rows.
none: This is the default value. The grid has no rows unless required.
auto: Row size is determined based on the content and element.
length: Sets the row size to a specific length (e.g., pixels, percentage).
max-content: All rows are sized based on the largest content within each row.
min-content: All rows are sized based on the smallest content within each row.
Syntax:
grid-template-columns: none | auto | length | max-content | min-content;
The auto and length values are shown below as an example.
<head>
<style>
.container-1 {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: 100px 150px auto;
background-color: steelblue;
padding: 10px;
}
.container-2 {
display: grid;
grid-template-rows: auto 200px auto;
background-color: steelblue;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 15px;
font-size: 20px;
}
</style>
</head>
<body>
<h1> The Grid-template-rows auto and length value </h1>
<div class="container-1">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
</div>
<h1> The Grid-template-rows length & auto value </h1>
<div class="container-2">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
</div>
</body>
The min-content value is shown below as an example.
<head>
<style>
.container {
display: grid;
grid-template-rows: min-content;
background-color: steelblue;
gap: 10px;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h1> The grid-template-rows min-content value</h1>
<div class="container">
<div class="items items-1">1.Box Lorem ipsum dolor sit amet.</div>
<div class="items items-2">2.Box </div>
</div>
</body>
The max-content value is shown below as an example.
<head>
<style>
.container {
display: grid;
grid-template-rows: max-content;
background-color: steelblue;
gap: 10px;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h1> The grid-template-rows max-content value</h1>
<div class="container">
<div class="items items-1">1.Box Lorem ipsum dolor sit amet.</div>
<div class="items items-2">2.Box </div>
</div>
</body>
Grid-template Property
The grid-template property is a shorthand property that combines grid-template-rows, grid-template-columns and grid-template-areas into one declaration.
none: Default value indicates that no explicit grid template is defined.
grid-template-rows and grid-template-columns: Defines the sizes of rows and columns. You can specify the size of rows and columns using length values (e.g., pixels, percentages) or use auto to maintain default sizes.
grid-template-areas: Defines the areas within the grid layout. The grid-area property is used to name grid items, which are then referenced in grid-template-areas.
Syntax:
grid-template: none | grid-template-rows / grid-template-columns | grid-template-areas.
The grid-template-rows and grid-template-columns values are shown below as an example.
<head>
<style>
.container-1 {
display: grid;
grid-template: auto 200px / 300px auto;
background-color: steelblue;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 15px;
font-size: 20px;
}
</style>
</head>
<body>
<h1>The Grid-template property - grid-template-rows / grid-template-columns value </h1>
<div class="container-1">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
</div>
</body>
The grid-template-areas value is shown below as an example.
<head>
<style>
.container-1 {
display: grid;
grid-template:
'header header header header'
'menu main aside aside'
'menu main aside aside'
'menu footer footer footer';
background-color: steelblue;
gap: 10px;
padding: 10px;
}
.items-1 {
grid-area: header;
}
.items-2 {
grid-area: menu;
}
.items-3 {
grid-area: main;
}
.items-4 {
grid-area: aside;
}
.items-5 {
grid-area: footer;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<h1> The Grid-template property - grid-template-area value</h1>
<div class="container-1">
<div class="items items-1"> Header </div>
<div class="items items-2"> Menu </div>
<div class="items items-3"> Main </div>
<div class="items items-4"> Aside </div>
<div class="items items-5"> Footer </div>
</div>
</body>
Column-gap and row-gap properties
The column-gap property defines the spacing between columns in a grid layout, while the row-gap property sets the space between rows.
If you wish to specify different gap sizes for columns and rows individually, you can use the column-gap and row-gap properties separately.
In the old version, the column-gap property was known as grid-column-gap, and the row-gap property was known as grid-row-gap. However, in CSS3, these properties were renamed to column-gap and row-gap, respectively. Nonetheless, using either of these property names achieves the same result.
Syntax:
column-gap: value;
row-gap: value;
The column-gap and row-gap values are shown below as an example.
<head>
<style>
.container-1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 150px;
grid-row-gap: 20px;
background-color: steelblue;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 10px;
font-size: 25px;
}
.container-2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 20px;
row-gap: 100px;
background-color: steelblue;
padding: 10px;
}
</style>
</head>
<body>
<h2> The Grid Column-Gap 150px and Row-Gap 20px </h2>
<div class="container-1">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
</div>
<h2>The Grid Column-Gap 20px and Row-Gap 100px </h2>
<div class="container-2">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
</div>
</body>
Gap Property
The gap property is a shorthand for setting both row-gap and column-gap properties simultaneously in a grid layout. Its default value is normal.
You can use it to assign the same value to both gaps, with the first value applied to rows and the second to columns. Formerly known as grid-gap, in CSS3, it was renamed to gap.
Syntax:
gap: row-gap column-gap;
<head>
<style>
.container-1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 50px;
background-color: steelblue;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 10px;
font-size: 25px;
}
.container-2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 50px 0;
background-color: steelblue;
padding: 10px;
}
.container-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0 100px;
background-color: steelblue;
padding: 10px;
}
</style>
</head>
<body>
<h2> The Grid-Gap one value 50px Row and Column</h2>
<div class="container-1">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
</div>
<h2> The Grid-Gap two value 50px Row and 0px Column</h2>
<div class="container-2">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
</div>
<h2> The Grid-Gap two value 0px Row and 100px Column</h2>
<div class="container-3">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
</div>
</body>
Grid-column, grid-column-start, and grid-column-end properties
The grid-column-start property determines the starting column for an item, while grid-column-end specifies the column where it ends. These can be combined into a single shorthand property called grid-column.
This shorthand property makes it easier to set both the starting and ending columns at once.
Syntax:
grid-column: grid-column-start / grid-column-end;
grid-column-start: value;
grid-column-end: value;
The grid-column-start and grid-column-end values are shown below as an example.
<head>
<style>
.container-1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-color: steelblue;
gap: 10px;
padding: 10px;
}
.items-1 {
grid-column-start: 1;
grid-column-end: 4;
}
.items-8 {
grid-column-start: 2;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
}
</style>
</head>
<body>
<h1> The Column Start and End </h1>
<div class="container-1">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
<div class="items items-7"> 7. Box </div>
<div class="items items-8"> 8. Box </div>
</div>
</body>
The grid-column value is shown below as an example.
<head>
<style>
.container-1 {
display: grid;
grid-template-columns: repeat(3, 1fr);
background-color: steelblue;
gap: 10px;
padding: 10px;
}
.items-1 {
grid-column: 2 / 3;
}
.items-8 {
grid-column: 1;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
}
</style>
</head>
<body>
<h1> The Grid-column property </h1>
<div class="container-1">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
<div class="items items-7"> 7. Box </div>
<div class="items items-8"> 8. Box </div>
</div>
</body>
Grid-row, grid-row-start, and grid-row-end properties
The grid-row-start property sets the starting row for an item, while grid-row-end determines the ending row. These can be combined into a single shorthand property called grid-row.
Grid-row shorthand properties are grid-row-start and grid-row-end, where the first value defines the start and the second value defines the end.
Syntax:
grid-row: grid-row-start / grid-row-end;
grid-row-start: value;
grid-row-end: value;
The grid-row, grid-row-start and grid-row-end values are shown below as an example.
<head>
<style>
.container-1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-color: steelblue;
gap: 10px;
padding: 10px;
}
.items-1 {
grid-row-start: 1;
grid-row-end: 4;
}
.items-2 {
grid-row: 1 / 5;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
}
</style>
</head>
<body>
<h1> The Row Start and End </h1>
<div class="container-1">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
<div class="items items-7"> 7. Box </div>
</div>
</body>
Grid-auto-columns Property
The grid-auto-columns property specifies the size for columns in a grid container that haven't been explicitly sized.
auto: Default value, where column size is determined by the container size.
fit-content(): Size based on content.
max-content: Columns sized based on the largest item in each column.
min-content: Columns sized based on the smallest item in each column.
minmax(min, max): Defines a size range between min and max.
length: Specifies column size using a length value (e.g., pixels, percentages).
Syntax:
grid-auto-columns: auto | max-content | min-content | length | minmax(min, max);
The auto and fit-content() values are shown below as an example.
<head>
<style>
.container-1 {
display: grid;
grid-auto-columns: auto;
}
.container-2 {
display: grid;
grid-auto-columns: fit-content(400px);
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 5px;
font-size: 20px;
}
</style>
</head>
<body>
<h1>The Grid-auto-column property - auto value</h1>
<div class="container-1">
<div class="items items-1"> 1. Box Lorem ipsum dolor sit amet.</div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
</div>
<br>
<h1>The Grid-auto-column property - fit-content() value</h1>
<div class="container-2">
<div class="items items-1"> 1. Box Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci
quod quam assumenda ea ducimus sunt impedit aspernatur repellat rem officia. </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
</div>
</body>
The min-content and max-content values are shown below as an example.
<head>
<style>
.container-1 {
display: grid;
grid-auto-columns: min-content;
}
.container-2 {
display: grid;
grid-auto-columns: max-content;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 5px;
font-size: 20px;
max-width: 90%;
}
</style>
</head>
<body>
<h1>The Grid-auto-column property min-content value</h1>
<div class="container-1">
<div class="items items-1"> 1. Box Lorem ipsum dolor sit amet.</div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
</div>
<br>
<h1>The Grid-auto-column property max-content value</h1>
<div class="container-2">
<div class="items items-1"> 1. Box Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum accusamus? </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
</div>
</body>
The length and minmax() values are shown below as an example.
<head>
<style>
.container-1 {
display: grid;
grid-auto-columns: 400px;
}
.container-2 {
display: grid;
grid-template-areas: "L-side R-side";
grid-auto-columns: minmax(400px, 40%);
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 20px;
max-width: 90%;
}
</style>
</head>
<body>
<h1>The Grid-auto-column property - length value</h1>
<div class="container-1">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
</div>
<br>
<h1>The Grid-auto-column property - minmax(min, max) value</h1>
<div class="container-2">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
</div>
</body>
Grid-auto-rows Property
The grid-auto-rows property specifies the size of rows in a grid container for which size has not been explicitly set.
Here are the values for grid-auto-rows:
auto: Default value, where row size is determined by the largest item in the row.
max-content: Row size based on the largest item in each row.
min-content: Row size based on the smallest item in each row.
length: Specifies row size using a length value (e.g., pixels, percentages).
minmax(min, max): Defines a size range between min and max.
Syntax:
grid-auto-rows: auto | max-content | min-content | length | minmax(min, max);
The auto value is shown below as an example.
<head>
<style>
.container-1 {
display: grid;
grid-template-areas: "L-side between R-side";
grid-auto-rows: auto;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 20px;
max-width: 90%;
}
</style>
</head>
<body>
<h1>The Grid-auto-rows property - auto value</h1>
<div class="container-1">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-2"> 4. Box </div>
<div class="items items-3"> 5. Box </div>
<div class="items items-3"> 6. Box </div>
</div>
</body>
The max-content and min-content values are shown below as an example.
<head>
<style>
.container-1 {
display: grid;
grid-template-areas: "L-side between R-side";
grid-auto-rows: min-content;
}
.container-2 {
display: grid;
grid-template-areas: "L-side between R-side";
grid-auto-rows: max-content;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 20px;
max-width: 90%;
}
</style>
</head>
<body>
<h1>The Grid-auto-rows property - min-content value</h1>
<div class="container-1">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
</div>
<br>
<h1>The Grid-auto-rows property - max-content value</h1>
<div class="container-2">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
</div>
</body>
The minmax() and length values are shown below as examples.
<head>
<style>
.container-1 {
display: grid;
grid-template-areas: "L-side R-side";
grid-auto-rows: 100px;
}
.container-2 {
display: grid;
grid-template-areas: "L-side R-side";
grid-auto-rows: minmax(50px, 10%);
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 20px;
max-width: 90%;
}
</style>
</head>
<body>
<h1>The Grid-auto-rows property - length(px) value</h1>
<div class="container-1">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
</div>
<br>
<h1>The Grid-auto-rows property - minmax() value</h1>
<div class="container-2">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
</div>
</body>
Grid-auto-flow property
The grid-auto-flow property determines how the grid handles auto-placed items. Here are its values:
row: Default value. Items fill rows evenly and create new rows as needed.
column: Items fill columns evenly and create new columns as needed.
dense: Fills holes inside grid items.
row dense: Items fill rows and fill any holes in the grid.
column dense: Items fill columns and fill any holes in the grid.
Syntax:
grid-auto-flow: row | column | dense | row dense | column dense;
The row and column values are shown below as an example.
<head>
<style>
.container-1 {
display: grid;
grid-auto-flow: column;
}
.container-2 {
display: grid;
grid-auto-flow: row;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<h1>The Grid-auto-flow property - column value</h1>
<div class="container-1">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-1"> 4. Box </div>
</div>
<br>
<h1>The Grid-auto-flow property - row value</h1>
<div class="container-2">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-1"> 4. Box </div>
</div>
</body>
The column dense and row dense values are shown below as an example.
<head>
<style>
.container-1 {
width: 500px;
display: grid;
grid-template: repeat(4, 1fr) / repeat(1, 1fr);
grid-auto-flow: column dense;
}
.items-1 {
grid-column-start: 2;
}
.container-2 {
width: 500px;
display: grid;
grid-template: repeat(4, 1fr) / repeat(2, 1fr);
grid-auto-flow: row dense;
}
.items-5 {
grid-row-start: 3;
}
.items-8 {
grid-column-start: 2;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<h1>The Grid-auto-flow property - column dense value</h1>
<div class="container-1">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
</div>
<h1>The Grid-auto-flow property - row dense value</h1>
<div class="container-2">
<div class="items items-5"> 1. Box </div>
<div class="items items-6"> 2. Box </div>
<div class="items items-7"> 3. Box </div>
<div class="items items-8"> 4. Box </div>
</div>
</body>
Grid-area Property
The grid-area property is employed to specify the size, location, and name of grid items within a grid layout. It serves as a shorthand for four properties: grid-row-start, grid-column-start, grid-row-end, and grid-column-end.
Here are the different types of values for the grid-area property:
grid-row-start: Determines the starting row for the grid item.
grid-column-start: Determines the starting column for the grid item.
grid-row-end: Specifies the ending row for the grid item.
grid-column-end: Specifies the ending column for the grid item.
itemname: Assigns a name to the grid item, which can be referenced using the grid-template-area property of the grid container.
Syntax:
grid-area: grid-row-start | grid-column-start | grid-row-end | grid-column-end | itemname;<head>
<style>
.container {
display: grid;
grid-template:
'header-area header-area header-area header-area ';
background-color: steelblue;
gap: 10px;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
text-align: center;
}
.items-1 {
grid-area: header-area;
}
</style>
</head>
<body>
<h1> The Grid-area property</h1>
<div class="container">
<div class="items items-1"> 1. Box</div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
<div class="items items-7"> 7. Box </div>
<div class="items items-8"> 8. Box </div>
<div class="items items-9"> 9. Box </div>
</div>
</body>
Grid-template-area Property
The grid-template-areas property defines areas within a grid layout. By utilizing the grid-area property to name grid items, you can reference these names in the grid-template-areas property.
Each area is delineated by an apostrophe ('). When referencing an unnamed grid item, use a period sign (.). This allows for straightforward designation and referencing of grid areas within the layout.
Syntax:
grid-template-areas: none | item names;
<head>
<style>
.container {
display: grid;
grid-template-areas:
'Section Section . . .'
'Section Section . . .';
background-color: steelblue;
gap: 10px;
padding: 10px;
}
.items-1 {
grid-area: Section;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
}
</style>
</head>
<body>
<h1> The Grid-template-area property</h1>
<div class="container">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
<div class="items items-7"> 7. Box </div>
</div>
</body>
Grid Property
The grid property provides a comprehensive grid-based layout system with rows and columns, eliminating the need for other positioning properties like float or position.
It serves as a shorthand for several grid-related properties:
one: This value is the default, which is no specific size for a row or column.
grid-template-rows and grid-template-columns: Defines the size of rows and columns.
grid-template-areas: Specifies the grid layout using named areas.
grid-auto-rows and grid-auto-columns: Sets the size (height) of rows and auto-sized columns.
grid-auto-flow grid-auto-rows / grid-template-columns: Specifies how to place items and auto-size rows and columns.
Syntax:
grid: none | grid-template-rows / grid-template-columns | grid-template-areas | grid-template-rows / [grid-auto-flow] grid-auto-columns | [grid-auto-flow] grid-auto-rows / grid-template-columns;<head>
<style>
.container {
display: grid;
grid: auto 300px / auto 50% auto 500px;
background-color: steelblue;
gap: 10px;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<h1> The Grid Property</h1>
<div class="container">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
<div class="items items-7"> 7. Box </div>
<div class="items items-8"> 8. Box </div>
</div>
</body>
You can learn more about this topic by going to Part 2.