Do you want to learn how to use CSS Grid for your web pages? If the answer is yes, you’re in the right place. CSS Grid presents a number of opportunities for frontend developers, such as creating dynamic layouts, improving design analysis and allowing greater connection between the content offered. By the end of this article, you’ll be ready to use CSS Grid with confidence on your web pages. Start now!
What is CSS Grid?
CSS Grid is a web design design technique that allows designers to create complex and flexible page layouts with a grid structure. With CSS Grid, you can divide the page into rows and columns, and then place elements in different areas of the grid.
At its core, CSS Grid is a two-dimensional design system that provides an easier and more efficient way to design complex designs that previously could only be achieved with more advanced design techniques or through the use of third-party frameworks or libraries.
The grid is defined in CSS by creating a grid container and then defining the rows and columns in that container. Once the grid is defined, elements are placed in different areas of the grid using the grid-area property.
CSS Grid is compatible with all major modern browsers, which means designers can use this design technique without having to worry about browser compatibility. Additionally, by using CSS Grid, designers can create layouts that respond to different screen sizes and devices, making them ideal for responsive website designs.
CSS Grid Structure
The structure of a CSS Grid consists of three main elements: the grid container, rows, and columns.
Grid Container
The grid container is the HTML element that contains all the elements that are organized in the grid. To define the container as a grid, we must set its display property to grid.
.container {
display: grid;
}
rows
Grid rows
are defined using the grid-template-rows property, which defines the number and size of grid rows. We can set the size of each row individually or use the repeat() function to define several rows with the same size.
.container {
display: grid;
grid-template-rows: 100px 200px 100px;
}
This code defines a grid with three rows of different sizes: the first row of 100px, the second row of 200px and the third row of 100px.
Columns
Grid columns
are defined using the grid-template-columns property, which defines the number and size of grid columns. As with rows, we can set the size of each column individually or use the repeat() function to define multiple columns with the same size.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
This code defines a grid with three columns of different sizes: the first column of 1fr, the second column of 2fr, and the third column of 1fr.
Cells
Once the rows and columns of the grid are defined, we can place elements in each cell using the grid-area property or its equivalents grid-row-start, grid-row-end, grid-column-start and grid-column-end. We can also use the span function to specify the number of rows or columns that an element should cover.
.container {
display: grid;
grid-template-rows: 100px 200px 100px;
grid-template-columns: 1fr 2fr 1fr;
}
.item1 {
grid-area: 1 / 1 / 3 / 3;
}
.item2 {
grid-area: 2 / 2 / span 2 / span 2;
}
This code places two elements in different areas of the grid. The item with the class “item1” occupies the cells from the first row and first column to the third row and third column. The item with the class “item2” occupies two rows and two columns, starting at the second row and the second column.
This is the basic structure of a CSS Grid grid, but there are many more properties and techniques that can be used to create more complex and advanced layouts.
Basic CSS Grid tutorial
Here’s a basic CSS Grid tutorial to get you started:
Set grid
To define a grid, we must define both rows and columns. We use the grid-template-columns and grid-template-rows properties to define the number and size of rows and columns.
example:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
}
This code defines a grid with three columns of equal width (1fr each) and two rows 100 pixels high.
Place elements in grid
To place elements on the grid, we use the grid-area property. We can give a name to each area of the grid and then specify the name of the area in the grid-area property.
example:
.item1 {
grid-area: header;
}
.item2 {
grid-area: main;
}
.item3 {
grid-area: sidebar;
}
.item4 {
grid-area: footer;
}
This code places four elements in different areas of the grid. The first area is called “header”, the second “main”, the third “sidebar” and the fourth “footer”.
Adjust the size and position of elements
Once we have placed the elements in the grid, we can adjust their size and position using the grid-row-start, grid-row-end, grid-column-start and grid-column-end properties.
example:
.item1 {
grid-area: header;
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 4;
}
This code adjusts the size and position of the item with the class “item1”. The element extends from the first row to the second row and from the first column to the fourth column.
This is just a basic CSS Grid tutorial. There are many more properties and techniques that can be used to create more complex and advanced layouts with CSS Grid.
Advanced CSS Grid tutorial
Here’s an advanced CSS Grid tutorial to pick up where we left off in the basic tutorial:
Automatic adjustment of elements
using the grid-auto-rows and
grid-auto-columns property, we can specify the size of rows and columns automatically created by CSS Grid.
example:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
This code sets the width of each column to 1fr and the height of each row is automatically adjusted based on the content. However, the minimum height of each row is 100px and can grow depending on the content it has.
Spacing Adjustment
Using the Grid-Column-Gap, Grid-Row-Gap, and Grid-Gap properties, we can adjust the spacing between rows and columns of the grid.
example:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
This code establishes a space of 20px between the rows and columns of the grid.
Layering
Using the z-index property, we can specify the layered position of overlapping elements in the grid.
example:
.item1 {
grid-area: header;
z-index: 2;
}
.item2 {
grid-area: main;
z-index: 1;
}
This code places two elements in different areas of the grid and adjusts their position in layers. The item with the class “item1” is displayed above the item with the class “item2”.
Alignment
Using the justify-content, align-content, justify-items, and align-items properties, we can adjust the alignment of the elements in the grid.
example:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
align-content: center;
justify-items: center;
align-items: center;
}
This code adjusts the horizontal and vertical alignment of the elements in the grid to the center.
This is just an advanced CSS Grid tutorial. There are many more properties and techniques that can be used to create more complex and advanced layouts with CSS Grid.
Adapting CSS Grid to different screens
One of the main advantages of CSS Grid is that it allows you to create flexible and adaptable layouts to different screen sizes. Here are some techniques for adapting a CSS Grid grid to different devices and screens:
Uses relative units
Instead of using fixed units as pixels, it is advisable to use relative units such as percentages or fractions (FR). In this way, the sizes of the rows and columns will automatically adjust to the dimensions of the screen.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
Use minmax() function
This function allows you to set a range of sizes for a row or column. For example, we can set a row with a minimum size of 100 pixels and a maximum size of 1 fr. This way, the row will automatically snap to the screen, but it will never be smaller than 100 pixels.
.container {
display: grid;
grid-template-rows: repeat(3, minmax(100px, 1fr));
}
Use media queries
The query media allows you to apply different styles to the same page depending on the size of the screen. We can use them to change the structure of the grid or adjust the sizes of the rows and columns depending on the device.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
@media screen and (max-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: repeat(3, minmax(100px, 1fr));
}
}
This example sets a three-column grid for large screens, but when the screen has a maximum width of 768 pixels, the grid structure is changed to a single column and row sizes are adjusted.
Use grid-auto-flow property
This property allows you to set the order in which elements are placed in the grid. By default, elements are placed in the order they appear in the HTML, but we can change this order to suit different screen sizes.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: dense;
}
@media screen and (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
This example sets a three-column grid with the default item order. However, when the screen has a maximum width of 768 pixels, the grid is changed to a single column and the grid-auto-flow: dense property is used to allow elements to be placed in empty rows and columns to make better use of the available space.
These are just a few techniques for adapting a CSS Grid grid to different screen sizes. in general it is recommended that you use a combination of relative units minmax() functions query media and grid properties to create layouts
