CSS Grid Layout is a two-dimensional layout system for the web that allows us to create layout patterns natively in the browser.
It is a new layout system that is not limited to rows and columns like the older CSS layout systems, but instead allows us to place elements in any desired location on the page.
Here are some of the key CSS properties used in CSS Grid Layout are:
display: grid - Defines an element as a grid container.
grid-template-columns - Specifies the number and size of the columns in a grid.
grid-template-rows - Specifies the number and size of the rows in a grid.
grid-template-areas - Defines named grid areas that can be used to place grid items.
grid-gap - Sets the spacing between grid rows and columns.
grid-column-start/grid-column-end - Specifies the start and end positions of a grid item along the column axis.
grid-row-start/grid-row-end - Specifies the start and end positions of a grid item along the row axis.
As an example:
In this example:
- The CSS code defines the
grid-container as a grid using display: grid. grid-template-columns is set to repeat(2, 1fr) to create two columns of equal width, and grid-template-rows is set to auto 1fr auto to create three rows, with the middle row taking up the remaining vertical space.grid-gap is used to add a 20px gap between grid items.- The
header and footer are set to span both columns using grid-column: 1 / span 2. - The
.grid-item class sets the background color to white and adds 20px of padding.
The Display Property
The display property in CSS is used to set the display behavior of an element.
Common values for the display property are:
An example of display property to create a basic grid layout:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
In this example:
- We create a grid container with three equal-sized columns, and a gap of
20 pixels between the columns and rows. - Each grid item has a gray background and
20 pixels of padding.
The Grid Columns
The grid-template-columns property use to define the number and size of columns in a grid.
As an example:
.grid-container {
display: grid;
grid-template-columns: 25% 50% 25%;
}
We can also use the repeat() function to create a series of columns with a specific width.
As an example:
.grid-container {
display: grid;
grid-template-columns: repeat(6, 100px);
}
We can also mix and match these methods to create more complex grid layouts.
As an example:
.grid-container {
display: grid;
grid-template-columns: 25% repeat(4, 1fr) 100px;
}
In thise example:
- This creates a grid with six columns, where the first column takes up
25% of the width, the next four columns take up an equal amount of remaining space using the 1fr unit, and the last column has a fixed width of 100px.
The Grid rows
The grid-template-rows property is used to define the number and size of rows in a grid.
As an example:
.grid-container {
display: grid;
grid-template-rows: 100px 1fr;
}
You can also use the repeat() function to create a series of rows with a specific height.
As an example:
.grid-container {
display: grid;
grid-template-rows: repeat(6, 50px);
}
Just like with columns, you can also mix and match these methods to create more complex grid layouts.
As an example:
.grid-container {
display: grid;
grid-template-rows: 100px repeat(3, 1fr) 50px;
}
In this example:
- This creates a grid with five rows, where the first row takes up
100px of height, the next three rows take up an equal amount of remaining space using the 1fr unit, and the last row has a fixed height of 50px.
The Grid Gaps
The grid-gap property helps to create a gap between rows and columns in a grid.
As an example
.grid-container {
display: grid;
grid-gap: 20px;
}
You can also set different gap sizes for rows and columns using the grid-row-gap and grid-column-gap properties.
As an example
.grid-container {
display: grid;
grid-row-gap: 10px;
grid-column-gap: 20px;
}
Additionally, you can use the grid-template-rows and grid-template-columns properties to specify the size of rows and columns while setting the gap at the same time.
As an example
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
grid-gap: 10px;
}