CSS grid - 2

CSS grid - 2

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 : Screenshot (161).png


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 : Screenshot (162).png

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 : Screenshot (163).png


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 : Screenshot (164).png


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 : Screenshot (165).png


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 : Screenshot (166).png


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 : Screenshot (167).png


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 Screenshot (169).png


.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 150px);
  align-items: end;
}

Output : Screenshot (168).png


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!

Did you find this article valuable?

Support Learn Code Online by becoming a sponsor. Any amount is appreciated!