Css Module 12

  Module 12 : CSS Grid Basics – Grid Container, Grid Items, Rows, Columns, and Fractional Units

Introduction to CSS Grid

CSS Grid Layout is a powerful two-dimensional layout system that allows web developers to create flexible and responsive layouts. Unlike Flexbox, which primarily deals with one-dimensional layouts (rows or columns), CSS Grid can handle both rows and columns simultaneously.

This module will provide a detailed explanation of CSS Grid, covering grid containers, grid items, rows, columns, and fractional units, along with practical exercises and examples to help you master grid-based layouts.

1. Understanding the Grid Container

The grid container is the parent element that holds all the grid items. To define a grid container, use the display: grid or display: inline-grid property.

Example: Defining a Grid Container

.container {

  display: grid;

  background-color: #ddd;

  padding: 20px;

}

<div class="container">

  <div>Item 1</div>

  <div>Item 2</div>

  <div>Item 3</div>

</div>

display: grid; turns .container into a grid layout.

display: inline-grid; behaves similarly but keeps the container inline (width depends on content).

Exercise 1: Create a Grid Container

Create a <div> element with the class container.

Apply display: grid; in CSS.

Add some child elements inside the container.

2. Understanding Grid Items

Grid items are the direct children of the grid container. They align within the grid based on rows and columns.

   

Example: Basic Grid Items

.container {

  display: grid;

  grid-template-columns: 100px 100px 100px;

  grid-template-rows: 50px 50px;

  gap: 10px;

}

.item {

  background-color: lightblue;

  text-align: center;

  padding: 10px;

}

<div class="container">

  <div class="item">1</div>

  <div class="item">2</div>

  <div class="item">3</div>

  <div class="item">4</div>

  <div class="item">5</div>

  <div class="item">6</div>

</div>

The container has 3 columns (grid-template-columns: 100px 100px 100px;).

It has 2 rows (grid-template-rows: 50px 50px;).

A 10px gap is added between grid items.

Exercise 2: Define Grid Items

Create a grid container with multiple child elements.

Define columns and rows explicitly.

Use the gap property for spacing.

3. Defining Rows and Columns with Grid Template

Grid Rows and Columns Properties

grid-template-columns: Defines the number and width of columns.

grid-template-rows: Defines the number and height of rows.

Example: Creating a 3×2 Grid

.container {

  display: grid;

  grid-template-columns: 150px 150px 150px;

  grid-template-rows: 100px 100px;

}

Creates three columns (150px each).

Creates two rows (100px each).

Exercise 3: Define Rows and Columns

Set up a grid container with multiple columns and rows.

Assign different fixed sizes to columns and rows.

Add background colors to see the structure clearly.

4. Fractional Units (fr) for Flexible Layouts

Fractional units (fr) allow columns and rows to adjust dynamically based on available space.

Example: Using Fractional Units

.container 

{

  display: grid;

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

}

1fr 2fr 1fr divides the space into 3 parts.

The first and third columns take 1 part each.

The middle column takes 2 parts (double the space of the others).

Exercise 4: Using Fractional Units

Create a grid with three columns using fractional units.

Adjust the column widths dynamically.

Compare px vs fr for responsiveness.

5. Responsive Grid Layout Using CSS Grid

We can create responsive grids using auto-fit and auto-fill.

Example: Auto-Fit and Auto-Fill

.container {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

}

repeat(auto-fit, minmax(150px, 1fr)): Creates columns that:

Have a minimum width of 150px.

Expand to fill space using 1fr.

Exercise 5: Responsive Grid Layout

Implement repeat(auto-fit, minmax(150px, 1fr)) for a flexible grid.

Resize the browser to see the effect.

Summary of Key Concepts

Concept Description

Grid Container The parent element with display: grid.

Grid Items Direct children of the grid container.

Grid Rows Defines the number and size of horizontal tracks.

Grid Columns Defines the number and size of vertical tracks.

Fractional Units (fr) A flexible unit that adjusts dynamically.

Auto-fit / Auto-fill Creates responsive grids based on available space.

Final Project: Create a Responsive Card Layout

Instructions

Create a grid container.

Use fractional units (fr) for dynamic columns.

Make it responsive using auto-fit or auto-fill.

Style grid items to look like cards.

Example

.container {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 20px;

  padding: 20px;

}

.card {

  background: white;

  padding: 20px;

  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);

  text-align: center;

}

<div class="container">

  <div class="card">Card 1</div>

  <div class="card">Card 2</div>

  <div class="card">Card 3</div>

  <div class="card">Card 4</div>

</div>

Conclusion

This module covered CSS Grid basics, including:

Creating a grid container.

Defining grid items.

Structuring rows and columns.

Using fractional units (fr) for flexible layouts.

Implementing responsive grid designs.

By practicing these exercises, you'll build a strong foundation in CSS Grid and be able to create modern, responsive web layouts with ease.