Lecture 9: CSS Grid - A Deep Dive
Welcome to the ninth lecture of the "Basic to Brilliance" course. In this lecture, we’ll explore CSS Grid, a powerful layout system that allows you to create complex web layouts with ease. While Flexbox is great for single-dimensional layouts (rows or columns), CSS Grid provides a two-dimensional layout system, enabling you to control both rows and columns simultaneously.
What is CSS Grid?
CSS Grid is a layout system in CSS that enables the creation of flexible, responsive, and grid-based layouts. It allows you to align elements into rows and columns, offering more control over layout structure than Flexbox.
Grid Terminology
Before diving into examples, let’s get familiar with some key terms:
- Grid Container: The parent element that contains the grid.
- Grid Items: The child elements inside the grid container.
- Grid Lines: The horizontal and vertical dividing lines of the grid.
- Grid Tracks: The space between two grid lines, forming rows or columns.
- Grid Cells: The smallest individual units in the grid formed by the intersection of a row and a column.
1. Basic Grid Structure
To start using Grid, apply display: grid
to the container.
- Example:
.grid-container {
display: grid;
}
Once display: grid
is applied, the child elements of the container become grid items.
2. Defining Grid Columns and Rows
You can define how many rows and columns your grid will have using the grid-template-columns
and grid-template-rows
properties.
- Example: Creating a grid with 3 columns and 2 rows.
.grid-container {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 50px 150px;
}
This will create a grid with:
- 3 columns: The first column is 100px wide, the second is 200px, and the third is 100px.
- 2 rows: The first row is 50px tall, and the second is 150px.
3. Using Fractional Units (fr)
CSS Grid introduces the fractional unit fr
, which represents a fraction of the available space in the grid container. This is a flexible way to allocate space among grid items.
-
Example: Using
fr
to divide space equally.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
In this example, the three columns will have equal widths, each taking one fraction of the available space.
4. Placing Grid Items
You can control where each grid item is placed using the grid-column
and grid-row
properties. These properties allow you to specify the start and end positions of the items.
- Example:
.grid-item {
grid-column: 1 / 3; /* This item spans from column 1 to column 3 */
grid-row: 1 / 2; /* This item is placed in the first row */
}
In this case, the grid item will span across the first two columns but will be placed in the first row.
5. Grid Gap
The grid-gap
property adds space between grid items, both horizontally and vertically.
- Example: Adding gaps between columns and rows.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
This creates equal 20px gaps between all grid items.
6. Auto-Fit and Auto-Fill
Auto-fit and auto-fill are powerful features that allow the grid to automatically place as many columns as possible, based on the size of the container.
- Auto-Fit Example:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
Here, the grid will automatically fit as many columns as possible, ensuring that each column is at least 100px wide but can grow to fill the available space.
Practical Example: A Simple Grid Layout
Let’s create a simple grid layout with CSS Grid.
HTML:
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
CSS:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
text-align: center;
}
In this example:
- The
.grid-container
has three equal-width columns created usingrepeat(3, 1fr)
. - The grid gap is set to 10px to add space between the grid items.
- Each
.grid-item
has padding and background color applied for better visibility.
7. Nested Grids
You can also nest grids, where a grid item becomes a grid container itself. This allows for more complex layouts.
- Example:
.nested-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
You can apply this concept to create a grid inside another grid for more granular control over your layout.
Responsive Design with CSS Grid
CSS Grid is great for responsive design. You can adjust the number of columns based on the screen size using media queries.
- Example: Creating a responsive grid.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
@media screen and (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 480px) {
.grid-container {
grid-template-columns: 1fr;
}
}
In this example:
- The grid starts with three columns.
- On screens smaller than 768px, the grid switches to two columns.
- On screens smaller than 480px, the grid collapses to a single column.
Practice Exercise
- Create a webpage layout using CSS Grid with a header, main content, sidebar, and footer.
- Use
grid-template-columns
andgrid-template-rows
to define the grid structure. - Make the layout responsive by adjusting the number of columns on different screen sizes.
Next Up: In the next lecture, we’ll explore Advanced CSS Grid Techniques, including grid areas, template layouts, and combining Grid with Flexbox. Stay tuned!
Top comments (2)
CSS grid is a marvelous feature!
Along with flex it covers almost all cases.
Thank you for writing.
Absolutely! thanks for commenting.