Welcome back to the CSS grid article part 2. Please check out the CSS grid part 1 if you haven't already. In this article, we will discuss and understand more about the grid layout system.
Positioning of items using grid lines
As we have discussed earlier, whenever we use grid layout, the parent element is divided into multiple rows and columns. For every x rows, there will be x+1 number of row lines and for every y columns, there will be y+1 number of column lines. This basic knowledge will help a lot as we go further.
Look into the following HTML and CSS codes :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</div>
</body>
</html>
body {
background-color: #bedcfa;
text-align: center;
color: #ffffff;
}
.container div {
max-width: 1500px;
padding: 24px;
margin: 5px;
}
.box1,
.box3,
.box5 {
background-color: #b088f9;
}
.box2,
.box4,
.box6 {
background-color: #da9ff9;
}
The following grid properties have been applied to the parent "container" element. Look into part 1 of the CSS grid article to refresh the basics.
.container {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, minmax(180px, auto));
}
Output :
Now we will learn how we can make the boxes take enough space.
We can make use of grid-column
and grid-row
properties to set the positioning of the elements.
.box1 {
grid-column-start: 1;
grid-column-end: 5;
}
The above code specifies that box1 must start its vertical position from column line 1 and end at column line 5.
Output :
Below is a shorthand notation that means the same as above.
.box1 {
grid-column: 1/5;
}
Some more grid-column properties to get familiar with it
.box1 {
grid-column-start: 1;
grid-column-end: 5;
}
.box2 {
grid-column: 5/7;
}
.box6 {
grid-column: 4/7;
}
Output :
Let's look into the row properties as well.
.box1 {
grid-column: 1/5;
}
.box2 {
grid-column: 5/7;
}
.box3 {
grid-row: 2/4;
}
.box4 {
grid-row: 4/7;
}
.box5 {
grid-row: 2/7;
grid-column: 2/4;
}
.box6 {
grid-column: 4/7;
grid-row: 2/5;
}
Using row properties is similar to column properties.
s/e
is the basic syntax where s is the start line and e is the end line.
Output :
Nested Grids
Consider the following HTML and CSS files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
</div>
</div>
</body>
</html>
body {
background-color: #bedcfa;
text-align: center;
color: #ffffff;
}
.container div {
max-width: 1500px;
padding: 24px;
margin: 5px;
}
.box1,
.box3,
.box5 {
background-color: #b088f9;
}
.box2,
.box4,
.box6 {
background-color: #da9ff9;
}
.container {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, minmax(180px, auto));
}
.box1 {
grid-column: 1/5;
}
.box2 {
grid-column: 5/7;
}
.box3 {
grid-row: 2/4;
}
.box4 {
grid-row: 4/7;
}
.box5 {
grid-row: 2/7;
grid-column: 2/4;
}
From the HTML file, we see that in the box6, we have four more sections (h1) that have been nested. The following code properly positions them.
.box6 {
grid-column: 4/7;
grid-row: 2/5;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 30px;
grid-template-rows: repeat(2, minmax(200px, auto));
}
Here box6 is the parent of the other four H1s. Hence apply display: grid
. Two columns have been created of one fraction each and contain 30px of space in between each nested H1. Two rows are created of a minimum of 200px.
.box6 h1 {
border: 1px solid black;
}
A simple styled border property has been added to view the nested elements better.
Output :
Let's dive more into positioning individual items.
Consider six boxes with the following grid properties
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}
Output :
Suppose we would want to place a particular box inside its position in a different way, we can make use of align-self
and justify-self
properties.
justify-self
corresponds to the horizontal alignment and align-self
corresponds to the vertical alignment
.box2 {
align-self: center;
}
.box5 {
justify-self: start;
}
Output :
We can also make use of align-items
and justify-items
to position all the items in a container.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
justify-items: center;
}
Output
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
align-items: end;
}
Output :
That's all for this article. Thanks for spending your valuable time!
Let's catch up in the next one (last article on CSS grid) where we will build a small webpage and also make it responsive...
See you soon!