Grid
The Chessboard of Layout Magic
CSS Grid is like a chessboard where you command every element as if you’re the grandmaster of the layout world. Flexbox excels at arranging items in a line, but Grid? Grid gives you control over two dimensions. You can move elements into rows and columns, directing them like game pieces that land exactly where you want them.
Perfect for the control enthusiasts among web designers! With Grid, everything has its precise place—nothing misaligned, nothing out of order. Whether on tiny screens or massive monitors, Grid ensures your layout looks as immaculate as if crafted by a perfectionist architect with magical powers.
The Chessboard of Web Development
Row by row, column by column – finally order without headaches!
Grid-Container und Grid-Items
Masters of Structured Arrangement
Before you can weave your Grid magic, you must establish the proper framework. The grid container is like the playing field of your layout, while the grid items are the pieces you maneuver across this field. Declare the container a grid, and you unlock its magical powers! However, the elements won’t organize themselves automatically—you’ll first need to understand and create the chessboard.
.container {
display: grid;
}Common CSS Commands
for Flexbox and Grid:
gap: Defines the spacing between elements.
align-items: Aligns child elements along the vertical axis (cross-axis).
justify-content: Determines the horizontal alignment (main-axis) of child elements in the container.
align-self: Aligns a single child element independently of the others.
order: Changes the visual order
of child elements.
place-items: Combines align-items and justify-items in one command.
Example: place-items: center;
place-content: Combines align-content and justify-content. Example: place-content: center space-between;
auto: As a value for positioning, auto works in both Grid and Flex to automatically align elements according to layout rules.
The Magic of Fractions
Building the Chessboard
In CSS Grid, fractions (fr) are the secret behind the flexible division of your layout. Imagine dividing space like a magical pie—fractions determine how big each slice will be. Using fr, you can easily define how much space each column or row gets without worrying about fixed measurements. For example, repeat(3, 1fr); creates three equal columns, with each column taking an even share (1fr) of the available space in the grid container. It’s the perfect balance of structure and flexibility.
.container {
display: grid;
grid-template-columns: 1fr 2fr 3fr;
}
Placing Items Precisely
No Chessboard Without Rules
Grids are held together by invisible lines that separate columns and rows, counted from left to right and top to bottom, always starting at 1. If you want an element to span multiple columns or rows, these grid lines act like markers on a treasure map. By specifying line numbers, you control exactly where each element lands. This allows you to create precise layouts with ample room for creativity!
.item {
grid-column: 1 / 4;
grid-row: 2 / 3;
}In this lesson, you have learned…
- How to use
display: grid;to define a grid container and create a flexible layout. - Why
gapis essential for setting spacing between grid items without needing extra margins or paddings. - Why
frunits are used for flexible column widths, dynamically distributing space without setting fixed values. - How to use
grid-template-columnsandrepeat()to build a grid that adapts to different screen sizes. - What grid lines are for – they allow you to position elements precisely within the grid and span them across multiple columns or rows as needed.
The Labyrinth of Grid Magic
Deep within the labyrinth of magic lies a puzzle that can only be solved through the power of CSS Grid. The hidden chambers and their magical doors will open only when you arrange the spaces into a precise grid. Master the art of Grid Magic to evenly distribute boxes, define rows and columns, and uncover the labyrinth’s hidden secrets. Those who conquer the grid will navigate the maze—and perhaps even impress a monster or two.
Your Task: Applying CSS Grid
Apply grid techniques and precisely place the boxes within the labyrinth:
- Create the Structure with Display Grid: Apply
display: gridto the.grid-containerto define the boxes as grid elements. - Define Grid Columns: Use
grid-template-columns: repeat(3, 1fr);to divide the grid into three equally sized columns. - Add Grid Gap: Add
grid-gap: 20px;to create spacing between the grid elements. - Place Items with Grid Column and Grid Row: Use
grid-columnandgrid-rowto position specific boxes, experimenting with different values to place them in various locations.
Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.box1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.box4 {
grid-column: 2 / 4;
grid-row: 2 / 3;
}
grid-auto-flow
The Invisible Magic
In the world of CSS Grid, you don’t always need to place every element precisely. Sometimes, you just want elements to automatically find their spot in the grid. Enter grid-auto-flow, the command that determines how grid items are automatically positioned when you don’t manually assign them.
By default, items are placed from left to right and top to bottom—this is called row flow (row). With grid-auto-flow, you can change this behavior, making items flow into columns instead.
.container {
display: grid;
grid-template-columns: repeat(3, 2fr);
grid-auto-flow: row;
}Possible Values:
row: Fills items row by row (default).
column: Fills items column by column.
dense: Fills gaps in the grid by squeezing smaller items into available spaces, maximizing efficiency.
auto-fit
A Flexible Grid for Every Occasion
With auto-fit, you create a grid that intelligently adapts to the available space. It ensures as many columns as possible are created without overlapping or crowding.
.container {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}Using minmax(200px, 1fr), each column is at least 200px wide and grows proportionally (up to 1 fraction of the free space) when more room is available.
The Result:
A flexible layout that fills the space efficiently and remains beautifully organized—all with minimal effort.
grid-template-areas
The Magic of Named Regions
Imagine building a house where every room has a name: “kitchen,” “living room,” “bedroom.” With grid-template-areas, you do the same for your grid by assigning logical names like “header,” “sidebar,” “content,” and “footer.” This results in a clear, maintainable layout that’s easy to adjust.
This command simplifies creating both simple and complex layouts without getting bogged down in exact numbers or column widths. It’s especially useful for spanning elements across multiple rows and columns, as named areas make the structure instantly understandable.
Wie funktioniert’s?
- header: Spans all three columns in the first row, like a banner at the top.
- sidebar: Stays in the left column and extends over two rows.
- content: Occupies the middle two columns and spans two rows, plus part of the second column in the third row.
- ad: Appears in the third column, limited to the third row.
- footer: Stretches across the entire width of the last row, acting as the foundation.
Named areas keep your layout readable and adaptable—ideal for efficient yet stylish designs!
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"sidebar content ad"
"footer footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.ad {
grid-area: ad;
}
.footer {
grid-area: footer;
}In this lesson, you have learned…
- How grid-auto-flow controls the flow of grid items, automatically inserting them into rows or columns.
- Why dense fills gaps in the grid efficiently by moving smaller items into unused spaces for optimal use.
- How auto-fit creates a flexible layout by generating as many columns as possible without overlapping content.
- Why minmax() combined with auto-fit is ideal for responsive designs, automatically adjusting column widths between a minimum and maximum value.
- How grid-template-areas lets you create named areas to make your grid more organized and easier to understand.
- Why grid-area allows you to intuitively assign elements to an area, enabling a clean layout without complex number specifications.
- How using grid-template-areas enables you to build flexible layouts that adapt quickly without needing to align each item individually.
The Order of Grid Fields
Deep within the labyrinth lies a secret: magical spaces that only reveal themselves when their grid areas are properly summoned. These fields, hidden within the rows and columns of the puzzle, can change shape and size—but only if you master the art of grid magic. Arrange them wisely, let them span across multiple sections, and watch as they unveil the hidden path. Those who command the grid fields unlock the gates to freedom—or at least the next chamber of adventures.
Your Task: Applying Grid Areas
create a complex grid with multiple areas and correctly position the elements
- Create the Structure with Grid Areas: Use
grid-template-areasto define regions like header, sidebar, main, and footer and assign them fixed positions in the grid. - Configure Columns and Rows: Set
grid-template-columnsandgrid-template-rowsto divide the grid into three columns and three rows. Ensure some areas span multiple columns or rows as needed. - Adjust Spacing and Grid Size: Add a
gapto create spacing between grid elements, and set a fixed height (70vh) to stretch the grid across the entire window height.
Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!
/* Basic grid setting */
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
gap: 20px;
height: 70vh;
padding: 20px;
border: 2px solid darkgreen;
}
/* Basic design of the boxes */
.box {
padding: 20px;
color: white;
background-color: darkblue;
border: 1px solid navy;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* Define areas */
.header {
grid-area: header;
background-color: darkgreen;
}
.sidebar {
grid-area: sidebar;
background-color: forestgreen;
}
.main {
grid-area: main;
background-color: lightseagreen;
}
.footer {
grid-area: footer;
background-color: olive;
}