CSS Grid
CSS Grid is a powerful layout system that allows you to create complex and responsive web designs with ease. It divides the web page into rows and columns, enabling you to place items precisely within the grid structure.
Key Concepts of CSS Grid
1. Grid Container
The grid container is the element you want to turn into a grid. You define a grid container by setting the display property to the grid or inline grid.
2. Grid Items
The elements inside the grid container are called grid items. These items are placed within the grid’s rows and columns.
Example:
Output:
In this example:
• display: grid;: Turns the container into a grid layout, allowing for precise placement of grid items.
• The grid-template-columns and grid-template-rows properties define the structure of the grid. In this case, the grid has three columns and two rows.
• The items are placed in the grid in the order they appear in the HTML, filling the grid from left to right, top to bottom.
3. Grid Lines
Grid lines are the dividing lines that create the structure of the grid. They can be used to position items precisely within the grid.
Example:
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
border: 2px solid black; /* Border to visualize grid container */
background-color: darkred;
padding: 10px;
}
.grid-item { background-color: #fdeca6; color: white; padding: 20px; text-align: center; border: 1px solid black; /* Border to visualize grid items */ }
</style>
</head>
<body>
<div class=”grid-container”>
<div class=”grid-item”>Item 1</div>
<div class=”grid-item”>Item 2</div>
<div class=”grid-item”>Item 3</div>
<div class=”grid-item”>Item 4</div>
<div class=”grid-item”>Item 5</div>
<div class=”grid-item”>Item 6</div>
</div>
</body>
In this example:
• Grid Container Border: border: 2px solid black; This adds a black border around the entire grid container, making the overall grid structure visible.
• Grid Item Borders: border: 1px solid black; Each grid item now has a black border, making the individual items stand out more clearly within the grid.
4. Grid Tracks
Grid tracks are the rows and columns in the grid. They define the space where grid items are placed.
5. Grid Areas
Grid areas are rectangular sections of the grid that span one or more grid cells. You can define and name grid areas to easily place items.
Example:
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
grid-template-areas:
“header header header”
“sidebar content footer”;
gap: 10px;
background-color: darkred;
padding: 10px;
}
.header { grid-area: header; background-color: #4CAF50; }
.sidebar { grid-area: sidebar; background-color: #ff5733; }
.content { grid-area: content; background-color: #f39c12; }
.footer { grid-area: footer; background-color: #3498db; }
.grid-item {
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class=”grid-container”>
<div class=”header grid-item”>Header</div>
<div class=”sidebar grid-item”>Sidebar</div>
<div class=”content grid-item”>Content</div>
<div class=”footer grid-item”>Footer</div>
</div>
</body>
Output:
In this example:
Grid Container (grid-container):
• grid-template-columns: 1fr 2fr 1fr;: This creates three columns, where the first and third columns take up equal space (1fr each), and the middle column takes up twice as much space (2fr).
• grid-template-rows: 100px 200px;: This creates two rows, with the first row having a height of 100px and the second row 200px.
• grid-template-areas: This defines the layout structure using named grid areas. The header spans across all three columns in the first row, and the second row contains the sidebar, content, and footer areas.
Grid Items:
• .header: Assigned to the header area, spans the entire first row.
• .sidebar: Assigned to the sidebar area, located in the first column of the second row.
• .content: Assigned to the content area, located in the middle column of the second row.
• .footer: Assigned to the footer area, located in the last column of the second row.
Basic CSS Grid Properties
1. grid-template-columns
This property defines the number and size of columns in the grid.
Example:
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 200px 1fr;
gap: 10px;
background-color: darkred;
padding: 10px;
}
.grid-item { background-color: #fdeca6; color: darkred; padding: 20px; text-align: center; }
</style>
</head>
<body>
<div class=”grid-container”>
<div class=”grid-item”>Item 1</div>
<div class=”grid-item”>Item 2</div>
<div class=”grid-item”>Item 3</div>
</div>
</body>
Output:
In this example:
• display: grid;: Defines the container as a grid layout.
• grid-template-columns: 100px 200px 1fr;:
• The first column is 100px wide.
• The second column is 200px wide.
• The third column takes up the remaining available space (1fr).
2. grid-template-rows
This property defines the number and size of rows in the grid.
Example:
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: 100px 200px;
gap: 10px;
background-color: darkred;
padding: 10px;
}
.grid-item { background-color: #fdeca6; color: darkred; padding: 20px; text-align: center; }
</style>
</head>
<body>
<div class=”grid-container”>
<div class=”grid-item”>Item 1</div>
<div class=”grid-item”>Item 2</div>
</div>
</body>
Output:
In this example:
• display: grid;: Defines the container as a grid layout.
• grid-template-rows: 100px 200px;:
• The first row is 100px tall.
• The second row is 200px tall.
3. grid-gap
This property sets the gap (space) between grid rows and columns.
Example:
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 20px; /* Space between items */
background-color: darkred;
padding: 10px;
}
.grid-item { background-color: #fdeca6; color: darkred; padding: 20px; text-align: center; }
</style>
</head>
<body>
<div class=”grid-container”>
<div class=”grid-item”>Item 1</div>
<div class=”grid-item”>Item 2</div>
<div class=”grid-item”>Item 3</div>
<div class=”grid-item”>Item 4</div>
<div class=”grid-item”>Item 5</div>
<div class=”grid-item”>Item 6</div>
</div>
</body>
Output:
In this example:
• display: grid;: Sets the container as a grid layout.
• grid-template-columns: repeat(3, 1fr);:
• Defines 3 columns of equal width (1fr each).
• The 1fr unit means “one fraction” of the available space, so each column takes up an equal portion of the grid width.
• grid-template-rows: repeat(2, 100px);:
• Creates 2 rows, each with a height of 100px.
• gap: 20px;: Adds a 20px space between the grid items.
4. grid-column
This property determines where a grid item starts and how many columns it spans.
Example:
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px;
gap: 10px;
background-color: darkred;
padding: 10px;
}
.grid-item { background-color: #fdeca6;; color: darkred; padding: 20px; text-align: center; }
.span-two {
grid-column: span 2; /* Spans two columns */
}
</style>
</head>
<body>
<div class=”grid-container”>
<div class=”grid-item”>Item 1</div>
<div class=”grid-item span-two”>Item 2 (spans 2 columns)</div>
<div class=”grid-item”>Item 3</div>
</div>
</body>
Output:
In this example:
• display: grid;: Defines the element as a grid container.
• grid-template-columns: repeat(3, 1fr);: Creates three columns, each with equal width (1fr).
• grid-template-rows: 100px;: Defines a single row with a height of 100px.
• gap: 10px;: Adds a 10px gap between the grid items.
• grid-column: span 2;: This property allows the grid item to span across two columns, rather than occupying a single column.
5. grid-row
This property determines where a grid item starts and how many rows it spans.
Example:
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 100px);
gap: 10px;
background-color: darkred;
padding: 10px;
}
.grid-item { background-color: #fdeca6; color: darkred; padding: 20px; text-align: center;
}
.span-three {
grid-row: span 3; /* Spans three rows */
}
</style>
</head>
<body>
<div class=”grid-container”>
<div class=”grid-item”>Item 1</div>
<div class=”grid-item span-three”>Item 2 (spans 3 rows)</div>
<div class=”grid-item”>Item 3</div>
</div>
</body>
Output:
In this example:
• display: grid;: Defines the element as a grid container.
• grid-template-columns: 100px 100px;: Creates two columns, each 100px wide.
• grid-template-rows: repeat(3, 100px);: Creates three rows, each 100px high.
• gap: 10px;: Adds a 10px gap between the grid items.
• grid-row: span 3;: This property allows the grid item to span across three rows, occupying the entire height of the grid.
Conclusion
CSS Grid is a powerful tool for creating sophisticated, responsive layouts. It allows you to control the arrangement of items in a grid, making it easier to design complex layouts with rows, columns, and areas. By mastering CSS Grid, you can create web pages that are both flexible and visually appealing, with a clean and organized structure.
Course Video
Youtube refference:
Practice Scenarios
Scenario 1: Basic Grid Layout
Objective: Create a simple grid with three columns and two rows.
Expected Output: A grid layout with six items arranged in three columns and two rows.
Output:
Scenario 2: Spanning Columns
Objective: Create a grid where one item spans across two columns.
Expected Output: A grid layout with one item spanning two columns and the other items occupying single cells.
Output:
Scenario 3: Grid Template Areas
Objective: Create a layout using named grid areas.
Expected Output: A grid layout with specific areas for a header, sidebar, content, and footer.
Output:
Scenario 4: Adjusting Grid Gaps
Objective: Create a grid and adjust the spacing between the items using grid gaps.
Expected Output: A grid layout with larger gaps between items.
Output:
Scenario 5: Responsive Grid Layout
Objective: Create a responsive grid that adjusts the number of columns based on the screen size.
Expected Output: A grid layout that changes from one column on small screens to three columns on larger screens.
Output:
Scenario 6: Aligning Items within Grid Cells
Objective: Align items within their grid cells using align-items and justify-items.
Expected Output: A grid layout where items are centered within their respective cells.
Output:
Scenario 7: Overlapping Grid Items
Objective: Create a grid layout where items overlap each other.
Expected Output: A grid layout where one item overlaps another.
Output:
