CSS Grid Introduction
The CSS Grid is a two-dimensional layout system that allows designers and
developers to create complex and responsive layouts with ease.
Grid layout creates a grid structure of rows and columns and positions
elements within the grid's individual cells.
The following diagram shows a simple grid layout having three rows and
columns.
Working of Grid Layout
The Grid Layout consists of the following steps:
[Link] up the Grid Container
The first step for a grid-based layout is to define a grid container. This
container will hold the grid [Link] display: grid declaration converts an
element as a grid container.
2. Create a Grid Structure
This second step involves specifying a structure for the grid by defining rows
and columns.
The grid-template-rows and grid-template-column properties allow to specify
rows and columns in a grid container.
3. Place Items in Grid Cells
The third and final step involves placing items into the individual cells of the
grid. These items can be any HTML elements that we want to position within
the grid layout.
Grid Layout Terminologies
[Link] Container and Grid Items:
The Grid container is a parent element that holds the grid items. Grid items are
the direct children of the grid container.
[Link] Line:
Grid line refers to the vertical and horizontal lines that divide the grid.
Horizontal lines separate rows, and vertical lines separate columns. For
example,
[Link] Track:
The grid track refers to the adjacent space between two grid lines. This can be
vertical or horizontal space. For example,
[Link] Area:
Grid area refers to the space surrounded by four grid lines. A grid area can
have any number of grid cells. For example,
[Link] Cell:
Grid cells are the individual units formed by the intersection of rows and
columns. For example,
[Link] Gap:
The grid gap refers to the space between the rows and columns in a grid. For
example,
CSS Grid Container Properties:
The grid container has the following set of properties:
[Link] up the Grid:
display: grid - Turns an HTML element into a grid container.
[Link] the Grid Rows and Columns:
grid-template-columns - Defines the size and number of columns.
grid-template-columns: column1-size column2-size column3-size .
grid-template-columns: 100px200px100px;
grid-template-rows - Defines the size and number of rows.
grid-template-rows: row1-size row2-size row3-size ..
CSS Fractional (Fr) Unit
The fractional unit (fr) divides the available space in the grid container into
fractions. It distributes available space within the grid container among
columns or rows in a flexible and dynamic way.
/* column-1, column-2, column-3 */
grid-template-columns: 1fr 2fr 1fr;
/* row-1, row-2, row-3 */
grid-template-rows: 1fr 1fr2fr;
width: 400px;
Grid Gaps
You can adjust the gap size by using one of the following properties:
column-gap
row-gap
gap
Example
The column-gap property sets the gap between the columns:
.grid-container {
display: grid;
column-gap: 50px;
}
Example
The gap property is a shorthand property for the row-gap and the column-
gap properties:
.grid-container {
display: grid;
gap: 50px 100px;
}
Example
The gap property can also be used to set both the row gap and the column
gap in one value:
.grid-container {
display: grid;
gap: 50px;
}
CSS Grid Item
The grid-column Property:
The grid-column property defines on which column(s) to place an item.
You define where the item will start, and where the item will end.
Refer to line numbers when placing a grid item in a grid container:
Example
Place a grid item at column line 1, and let it end on column line 3:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
Note: The grid-column property is a shorthand property for the grid-
column-start and the grid-column-end properties.
Example
Make "item1" start on column 1 and end before column 5:
.item1 {
grid-column: 1 / 5;
}
The grid-row Property:
The grid-row property defines on which row to place an item.
You define where the item will start, and where the item will end.
Note: The grid-row property is a shorthand property for the grid-row-
start and the grid-row-end properties.
Example
Place a grid item at row line 1, and let it end on row line 3:
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
Example
Make "item1" start on row-line 1 and end on row-line 4:
.item1 {
grid-row: 1 / 4;
}
The grid-area Property
The grid-area property can be used as a shorthand property for the grid-
row-start, grid-column-start, grid-row-end and the grid-column-
end properties.
Example
Make "item8" start on row-line 1 and column-line 2, and end on row-line 5
and column line 6:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Naming Grid Items
The grid-area property can also be used to assign names to grid items.
Named grid items can be referred to by the grid-template-areas property of
the grid container.
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myAreamyAreamyAreamyAreamyArea';
}
Example
Let "myArea" span two columns in a five columns grid layout (period signs
represent items with no name):
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myAreamyArea . . .';
}
Example:
To define two rows, define the column of the second row inside another set
of apostrophes:
.grid-container {
grid-template-areas: 'myAreamyArea . . .' 'myAreamyArea . . .';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="[Link]" />
<title>CSS Grid Container</title>
</head>
<body>
<div class="container">
<header>HEADER</header>
<aside class="left">SIDEBAR 1</aside>
<aside class="right">SIDEBAR 2</aside>
<main>MAIN SECTION</main>
<footer>FOOTER</footer>
</div>
</body>
</html>
[Link] {
display: grid;
/* defines the columns */
grid-template-columns: 1fr 3fr 1fr;
/* defines the rows */
grid-template-rows: 40px 100px 40px;
/* defines the grid areas placing the grid items */
grid-template-areas:
"header header header"
"sidebar1 main sidebar2"
"footer footer footer";
border: 2px solid black;
text-align: center;
}
header {
/* places the header within the header grid area */
grid-area: header;
background-color: skyblue;
}
[Link] {
/* places left sidebar within the sidebar1 grid area */
grid-area: sidebar1;
}
[Link] {
/* places right sidebar within the sidebar2 grid area */
grid-area: sidebar2;
}
main {
/* places the main content within the main grid area */
grid-area: main;
background-color: greenyellow;
}
footer {
/*places the footer in the footer grid area*/
grid-area: footer;
background-color: skyblue;
}