Lecture Notes Of Class 16:
Grid Layout - Part 1
Objective: Introduction to CSS Grid Layout
In this
class, we will learn about CSS Grid Layout, one of the most
powerful layout systems in CSS. This class will introduce the basic concepts,
including how to define grid containers and grid items, and how to use the display:
grid property to
create a grid-based layout.
1. What
is CSS Grid Layout?
CSS Grid
Layout is a two-dimensional layout system for the web. It allows you to arrange
content into rows and columns, providing more control over complex layouts
compared to traditional layout methods like floats or flexbox. With CSS Grid,
you can design complex web pages with just a few lines of CSS.
- Two-dimensional:
CSS Grid can handle both rows and columns, unlike Flexbox, which is a
one-dimensional layout system (it handles either rows or columns, not both
at once).
2. Defining
Grid Containers
A grid
layout starts by defining a grid container. The grid container
holds the grid items (the content you want to arrange in rows and columns).
To define
a grid container, you use the display property with the value grid. This tells the browser to treat the
element as a grid container.
Example:
css.container { display: grid;}The
element with the class .container will now behave as a grid container,
and any child elements inside it will automatically become grid items.
3. Defining
Grid Items
After
defining a grid container, all the child elements inside this container become grid
items. Grid items can be arranged into rows and columns based on the
rules you define for the grid.
Example HTML Structure:
html<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div></div>
In this
example:
.containeris the grid container.- Each
<div class="item">is a grid item.
4. Basic
Grid Layout with display: grid
To create
a simple grid, you need to define the number of rows and columns for your grid.
This can be done using the grid-template-rows and grid-template-columns properties.
Example:
css.container { display: grid; grid-template-columns: repeat(2, 1fr); /* 2 equal-width columns */ grid-template-rows: repeat(2, 100px); /* 2 equal-height rows */ gap: 10px; /* Gap between grid items */}Explanation:
grid-template-columns: repeat(2, 1fr);: This defines 2 columns with equal width (1frmeans 1 fraction of the available space).grid-template-rows: repeat(2, 100px);: This defines 2 rows, each with a height of100px.gap: 10px;: This defines a10pxgap between each grid item (both horizontally and vertically).
Resulting Layout:
html+------------+------------+| Item 1 | Item 2 |+------------+------------+| Item 3 | Item 4 |+------------+------------+5. Positioning
Grid Items
Once the
grid is set up, you can control where the items appear within the grid using grid
lines. You can specify which column or row a grid item should span
using the grid-column and grid-row properties.
For
example, to make the first item span across both columns:
css.item:nth-child(1) { grid-column: span 2; /* Makes the first item span across both columns */}Resulting Layout:
html+--------------------+------------+| Item 1 | Item 2 |+--------------------+------------+| Item 3 | Item 4 |+--------------------+------------+6. Lab
Exercise: Create a Simple Grid Layout
Objective: Create a simple grid layout using
the CSS Grid layout system.
Step 1: Create the HTML Structure
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Grid Layout</title> <link rel="stylesheet" href="styles.css"></head><body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div></body></html>
Step 2: Apply CSS Styles
css.container { display: grid; grid-template-columns: repeat(2, 1fr); /* 2 equal-width columns */ grid-template-rows: repeat(2, 100px); /* 2 equal-height rows */ gap: 10px; /* Gap between grid items */} .item { background-color: lightblue; text-align: center; padding: 20px; border: 2px solid #000;}Explanation:
- The
.containerclass defines a grid with 2 columns and 2 rows, each with equal width and height, and a10pxgap between items. - The
.itemclass adds a background color, center-aligns the text, and applies padding and borders for better visibility.
Expected Output:
Your
layout should look like this:
mathematica+------------+------------+| Item 1 | Item 2 |+------------+------------+| Item 3 | Item 4 |+------------+------------+
This
basic example demonstrates how easy it is to create a layout with multiple rows
and columns using CSS Grid.
7. Conclusion
and Next Steps
In this
class, we covered:
- How
to define a grid container using
display: grid. - How
to define grid items and arrange them using
grid-template-columnsandgrid-template-rows. - How
to create a simple grid layout.
No comments:
Post a Comment