Lecture Notes Of Class 17: Grid Layout - Part 2

Objective:

The goal of this class is to explore advanced grid properties in CSS Grid Layout. Specifically, we will cover grid-template-columns, grid-template-rows, and gap. These properties are essential for controlling the size, structure, and spacing of items within a grid layout.

Topics Covered:

1.   grid-template-columns

2.   grid-template-rows

3.   gap

---

1. grid-template-columns

The grid-template-columns property is used to define the size of the columns in a grid layout. It allows you to specify how many columns you want in the grid and how wide each column should be. The value can be set using lengths (e.g., px, em), percentages, or the special fr unit (fractional unit).

Syntax:

css

grid-template-columns: <value> <value> ... ;

• Each value represents the width of the corresponding column.
• You can use multiple units, like px, %, fr, etc.

Examples:

1.   Equal width columns:

css

.container {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr; /* 3 equal-width columns */

}

Here, each column takes up 1 fraction of the available space.

2.   Fixed-width columns:

css

.container {

    display: grid;

    grid-template-columns: 200px 300px; /* First column is 200px, second is 300px */

}

3.   Mixed width columns:

css

.container {

    display: grid;

    grid-template-columns: 1fr 2fr 1fr; /* The second column is twice the width of the first and third */

}

---

2. grid-template-rows

The grid-template-rows property works similarly to grid-template-columns, but it defines the size of the rows in a grid. You can specify multiple values, each defining the height of a row.

Syntax:

css

grid-template-rows: <value> <value> ... ;

• Like grid-template-columns, you can use various units to define the height of each row, such as px, %, or fr.

Examples:

1.   Equal height rows:

css

.container {

    display: grid;

    grid-template-rows: 1fr 1fr 1fr; /* 3 equal-height rows */

}

2.   Fixed-height rows:

css

.container {

    display: grid;

    grid-template-rows: 100px 150px; /* First row is 100px, second is 150px */

}

3.   Mixed height rows:

css

.container {

    display: grid;

    grid-template-rows: 200px 1fr 2fr; /* The second row takes 1 fraction of space, the third takes 2 fractions */

}

---

3. gap

The gap property is used to define the space between rows and columns in a grid layout. It is a shorthand for both grid-column-gap (space between columns) and grid-row-gap (space between rows).

Syntax:

css

gap: <row-gap> <column-gap>;

• If you only provide one value, it will be applied to both rows and columns.
• If you provide two values, the first is for the row gap, and the second is for the column gap.

Examples:

1.   Single gap (applies to both rows and columns):

css

.container {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    grid-template-rows: 100px 100px;

    gap: 10px; /* 10px gap between both rows and columns */

}

2.   Different row and column gaps:

css

.container {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    grid-template-rows: 100px 100px;

    gap: 20px 10px; /* 20px gap between rows, 10px between columns */

}

---

Lab Exercise: Build a Responsive Card Layout Using CSS Grid

In this lab exercise, you will apply the concepts learned in this lesson to create a responsive card layout using CSS Grid. The cards will adjust based on the screen size.

Steps:

1.   HTML Structure: Begin by creating the HTML structure for the cards.

html

<div class="container">

    <div class="card">

        <img src="image1.jpg" alt="Card 1">

        <h3>Card 1</h3>

        <p>Some text here.</p>

    </div>

    <div class="card">

        <img src="image2.jpg" alt="Card 2">

        <h3>Card 2</h3>

        <p>Some text here.</p>

    </div>

    <div class="card">

        <img src="image3.jpg" alt="Card 3">

        <h3>Card 3</h3>

        <p>Some text here.</p>

    </div>

    <div class="card">

        <img src="image4.jpg" alt="Card 4">

        <h3>Card 4</h3>

        <p>Some text here.</p>

    </div>

</div>

2.   CSS Styling: Next, style the .container using CSS Grid. We will make the layout responsive by adjusting the number of columns based on the screen width.

css

.container {

    display: grid;

    grid-template-columns: repeat(4, 1fr); /* 4 equal-width columns by default */

    grid-gap: 20px;

    padding: 20px;

}

.card {

    background-color: #f8f8f8;

    border-radius: 8px;

    padding: 20px;

    text-align: center;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}

.card img {

    width: 100%;

    height: auto;

    border-radius: 8px;

}

@media (max-width: 1200px) {

    .container {

        grid-template-columns: repeat(3, 1fr); /* 3 columns on medium screens */

    }

}

@media (max-width: 800px) {

    .container {

        grid-template-columns: repeat(2, 1fr); /* 2 columns on small screens */

    }

}

@media (max-width: 500px) {

    .container {

        grid-template-columns: 1fr; /* 1 column on very small screens */

    }

}

3.   Explanation:

o    grid-template-columns: repeat(4, 1fr); defines a grid with four equal columns.

o    grid-gap: 20px; adds a gap between both rows and columns.

o    The media queries adjust the number of columns based on the screen width, making the layout responsive.

4.   Result: You will have a grid layout with cards that will automatically adjust from 4 columns on larger screens, to 3 columns on medium screens, to 2 columns on smaller screens, and finally 1 column on very small screens.

---

Conclusion:

In this class, we explored advanced CSS Grid properties such as grid-template-columns, grid-template-rows, and gap. These properties provide control over the layout and spacing of items in a grid, making it easier to create complex, responsive designs. In the lab exercise, you applied these concepts to build a responsive card layout, showcasing the flexibility and power of CSS Grid.

Homework Assignment:

1.   Create a grid layout for a portfolio website where each project is represented by a card.

2.   Use the gap property to define the spacing between cards.

3.   Add media queries to make the layout responsive for different screen sizes.