CSS Grid Layout offers a grid-based layout technique with rows and columns that makies it easier to design web pages without using floats and positioning. CSS grid is quite identical to HTML <table element as the child elements of a grid container is divided into rows and columns. Here is an example of CSS grid based web page layout.
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
<div class="grid1">
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
<style>
.grid{
display: grid;
grid-template-columns: auto auto auto auto;
margin: 0 -15px;
}
.grid1{
display: grid;
grid-template-columns: auto auto;
margin: 0 -15px;
}
.grid-item{
padding: 50px;
background: #121f28;
color: #fff;
text-align: center;
margin: 15px;
}
</style>
The parent element of a grid layout must have its display property set as grid or inline-grid. This is make all its child elements to grid items.
.grid-container {
display: grid;
}
The horizontal line of grid items are called rows while the vertical line of grid items are called columns. The space between each column/row are called gaps. You can adjust the gap size by using one of the following properties.
.grid {
display: grid;
grid-gap: 50px 100px;
}
The line between columns are called column lines while the line between rows are called row lines. You can force a grid item span multiple columns or rows using CSS grid properties grid-column-start, grid-column-end, grid-row-start and grid-row-end.
.item1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
The example above will force the grid item with class item1 occupy the space of two columns and two rows.
CSS grid property grid-template-columns defines the number of columns as well as their width in a grid layout. The values are separated by space where each value defines the count and length of the respective column.
.grid{
display: grid;
grid-template-columns: auto auto auto auto;
}
The example above will create a grid with four columns where width of each column is equal to each other.
.grid{
display: grid;
grid-template-columns: 400px 300px auto;
}
The example above defines a three columned grid layout where the width of the forst column is 400px while the width of the second column is 300px. The third column will take up the remaining space.
CSS grid property grid-template-rows defines the height of each row.
.grid-container {
display: grid;
grid-template-rows: 150px 200px;
}
The example above sets the height of first row in a grid to 150px while the height of second row is set to 200px. You can ommit this property to let the rows take up height on their own depending upon the content inside them.
CSS grid property justify-content is used to align the grid items inside the container horizontally. The grid items' total width must be less than the grid container's width for the justify-content property to impact it.
The options for CSS grid justify-content property are as follows.
.grid-container {
display: grid;
justify-content: space-evenly;
}
CSS grid property align-content is used to align the grid tems inside the grid container vertically. The height of the grid container must be larger than the total height of grid itemsfor the align-content property to have any impact.
The options are identical to justify-content property but affects vertically.
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
The items inside a grid container are grid items. Here are some CSS Grid properties you can use to style grid items.
CSS grid property grid-column is a shorthand property for the grid-column-start and the grid-column-end properties. You can use it to force a grid item span to multiple columns.
.item1 {
grid-column: 1 / 4;
}
The example above will force the grid item with class item1 to start on column 1 and span to the fourth column.
CSS grid property grid-row is a shorthand property for the grid-row-start and the grid-row-end properties. You can use it to force a grid item span to multiple rows.
.item1 {
grid-row: 1 / 4;
}
The example above will force the grid iem with class item1 start on the first row and span to the fourth row.
CSS grid property grid-area is a shorthand property for grid-row-start, grid-column-start, grid-row-end and grid-column-end properties. You can use it to force a grid item span multiple columns and rows with a single property. This property also defines the order of the grid item in the container.
.item1 {
grid-area: 1 / 2 / 4 / 6;
}
The example above will force the grid item with class item1 to start on first row second column and end on fourth row sixth column.
CSS grid property grid-area 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.
Example Item1 gets the name "myArea" and spans all five columns in a five columns grid layout:
.item1 {
grid-area: customGrid;
}
.grid{
grid-template-areas: 'customGrid customGrid customGrid';
}
The example above sets 3 columns in a grid but the grid item with class item1 will occupy the total space covered by the combination of all named grid items.
A period sign can be used to represent a grid item with no name.
Example Let "myArea" span two columns in a five columns grid layout (period signs represent items with no name):
.item1 {
grid-area: customGrid;
}
.grid{
grid-template-areas: 'customGrid customGrid . . .';
}
The example above contains three period signs which represent columns with no names. Grid item with class item1 will take up the space covered by the first two columns in this case.
Multiple rows can also be defined in a single grid-template-areas property as shown below.
.grid{
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Navigation</div>
<div class="item3">Main Content</div>
<div class="item4">Sidebar</div>
<div class="item5">Footer</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'navigation navigation navigation navigation navigation navigation'
'main-data main-data main-data main-data sidebar sidebar'
'footer footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.grid-container .item1 { grid-area: header; }
.grid-container .item2 { grid-area: navigation; }
.grid-container .item3 { grid-area: main-data; padding: 100px 0; }
.grid-container .item4 { grid-area: sidebar; padding: 100px 0; }
.grid-container .item5 { grid-area: footer; }
</style>
Leave a comment