Gridbox System
Introduction
The grid system is a layout that utilizes columns and rows for content, while also allowing for flexibility without relying on the position or float property. Web developers use grid systems to create cohesive and intentional website layouts.
How it Works
There are multiple ways grid systems can be achieved, though the main element must have a class of “container” and the “display: grid;” property. Any sub elements placed within the main element of this grid will be displayed as a grid item. The grid must have a “grid-template-rows" and “grid-template-columns property”, in which auto or other numeric values are used to define the number of rows and columns that exist.
Grid Set Up
Here is an example of how to set up the grid, which results in the container to the right. So far, the boxes only take up one column and row of space. Span 1 is the default, with the boxes staying the same size.
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
}
.box-1 {
grid-column: span 1;
}
.box-2 {
grid-column: span 1;
}
.box-3 {
grid-column: span 1;
}
Grid Example
Grid Span Example
Using Span
To the left shows the modification of the span value. Box 1 has a span of 2, meaning it takes up two spaces, while box 3 has a span of 3, taking up three spaces.
grid-column: span 2;
}
.box-2B {
grid-column: span 1;
}
.box-3B {
grid-column: span 3;
}