All about CSS3 for Absolute Beginners: Part 9
Welcome Back to Our Blog Series!
Hello everyone, and welcome back! I hope you enjoyed learning about Flexbox and how flexible it is for arranging elements. Now, let's dive into another powerful layout system—CSS Grid.
CSS Grid: Structuring Layouts Like a Pro
Have you ever seen the layout of a tic-tac-toe game? It’s usually a 3x3 grid. CSS Grid helps you create similar designs by defining rows and columns.
Basic Grid Setup
.container {
width: 1000px;
border: 5px solid black;
display: grid;
grid-template-rows: 50px 50px 50px 50px 50px;
grid-template-columns: 50px 50px 50px 50px 50px;
}
Inspect the page elements using the browser’s "Inspect" tool to see the defined rows and columns.
To make your grid more responsive, you can use relative units such as fractions (fr):
.container {
grid-template-rows: 1fr 1fr 3fr;
grid-template-columns: 2fr 1fr 4fr;
}
In this example, the third row will take up three times the space of the first two.
Simplifying with the repeat() Function
Instead of writing repetitive values, use the repeat() function:
grid-template-rows: repeat(5, 100px);
grid-template-columns: repeat(5, 100px);
Adding Space with gap Property
The gap property adds spacing between grid items:
gap: 20px; /* Applies to both rows and columns */
row-gap: 20px; /* Only for rows */
column-gap: 20px; /* Only for columns */
Aligning Grid Items
Align elements within the grid using:
justify-items: Controls horizontal alignment.
align-items: Controls vertical alignment.
Available values: start, center, end, and stretch.
If you want to align the entire grid, use justify-content or align-content.
Expanding Items Across Rows and Columns
To make an element span multiple rows or columns:
grid-column: 2 / 5; /* Starts at column 2 and ends at column 5 */
grid-row: 1 / 3; /* Starts at row 1 and ends at row 3 */
Z-Index: Managing Element Stacking
The z-index property determines which elements appear on top when they overlap. Remember, it only works with positioned elements (relative, absolute, fixed, or sticky).
.z { z-index: 3; }
.y { z-index: 2; }
.x { z-index: 1; }
Higher values bring elements to the front.
Overflow: Handling Extra Content
When content overflows a container, the overflow property lets you control it.
overflow: hidden; /* Hides overflow */
overflow: scroll; /* Adds a scrollbar */
overflow: auto; /* Scroll only when necessary */
overflow: clip; /* Clips the overflowing content completely */
You can also control horizontal and vertical overflow separately:
overflow-x: scroll;
overflow-y: hidden;
Wrapping Up
You've come a long way in learning CSS! Keep practicing and experimenting with these concepts. If you have any questions, feel free to leave a comment or reach out via the Contact Us page.
Stay tuned for more, and happy coding!