CSS Grid and Flexbox are two powerful and modern CSS layout systems that are best understood not as competing alternatives, but as complementary tools that work well together.
Grid and Flexbox relationship
- Dimensionality: A difference is that Flexbox is primarily one-dimensional; it excels at arranging items in a single row or a single column. Flexbox can wrap items onto multiple lines using flex-wrap; there’s no built-in way to align items across different rows. CSS Grid is a two-dimensional layout designed for arranging items in both rows and columns simultaneously. It’s planned for situations where you need to align items horizontally and vertically relative to each other.
- Layout Approach: Another difference is Flexbox works “content out,” where the size of the content within the items can affect the space each item needs. CSS Grid works more “layout in”; define the grid structure (rows and columns) first, and then place items into that structure. While grid items can influence the size of their tracks, this moves the entire track and other items within it.
- Corresponding Use: CSS Grid does not replace Flexbox; you don’t need to choose one over the other. You can combine both within a single visual component. For example, you use CSS Grid for the overall page layout, defining the major regions like header, sidebar, and main content, and then use Flexbox inside one of those grid areas (like the header or a card component) to arrange its contents.
- Use Cases:
- CSS Grid is the preferred tool for high-level, entire page layouts or complex two-dimensional arrangements like dashboards with boxes of changing sizes that need to fill space.
- Flexbox is suited for arranging items within a single row or column, such as navigation menus, lists of tags or pills, form extensions, arranging media objects, or aligning elements within a container. It delivers simple solutions for common problems like vertical centering.
There is no one-size-fits-all solution. Sometimes, using Flexbox for a task more readable and maintainable than using Grid, even if Grid could achieve it, and vice versa.
HTML and CSS Examples Showing their Relationship
The following example is constructed to show the concept of using Grid for the overall page layout and Flexbox for arranging items within one of the grid areas.
create a simple page structure with a header, main content area, and a footer. Inside the header, we’ll place a logo and navigation items, common use case for Flexbox within a larger layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid and Flexbox Example</title>
<style>
body {
margin: 0;
font-family: sans-serif;
min-height: 100vh; /* Make body minimum full height for footer placement */
display: grid; /* Use Grid for the main page layout */
/* Define rows: Header, main content (takes remaining space), Footer */
grid-template-rows: auto 1fr auto; /* auto size header/footer, 1fr for main */
grid-template-columns: 1fr; /* Single column layout */
gap: 1em; /* Gap between grid areas */
}
header {
/* Header spans the single column */
grid-column: 1;
grid-row: 1;
background-color: #f0f0f0;
padding: 1em;
display: flex; /* Use Flexbox inside the header to arrange its contents */
justify-content: space-between; /* Space out logo and nav */
align-items: center; /* Vertically center items */
}
.logo {
font-size: 1.5em;
font-weight: bold;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex; /* Use Flexbox for navigation links */
gap: 1em; /* Space between nav items */
}
nav a {
text-decoration: none;
color: #333;
}
main {
/* Main content takes the middle row */
grid-column: 1;
grid-row: 2;
background-color: #e0f7df;
padding: 1em;
}
footer {
/* Footer in the last row */
grid-column: 1;
grid-row: 3;
background-color: #f0f0f0;
padding: 1em;
text-align: center;
}
</style>
</head>
<body>
<header>
<div class="logo">My Website</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Main Content Area</h1>
<p>This area contains the primary content of the page. It takes up the flexible space provided by the Grid layout.</p>
<p>Flexbox and Grid work together to build complex layouts.</p>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
</html>In the above example:
- The body element is set to display: grid to create a Grid container for the overall page layout.
- grid-template-rows: auto 1fr auto; describes three rows: the header (auto size based on content), the main content (1fr takes the remaining space), and the footer (auto size).
- grid-template-columns: 1fr; describes a single column.
- The header, main, and footer elements are placed into their respective grid rows, spanning the single column indirectly or clearly.
- The header element, which is a Grid item, is also set to display: flex to become a Flexbox container for its child elements (the logo and the nav).
- Properties like justify-content: space-between and align-items: center are applied to the header’s Flexbox container to arrange the logo and navigation horizontally within the header and vertically center them.
- The nav ul element, which is a Flex item within the header’s Flexbox, is also set to display: flex to arrange the navigation links horizontally.
This proves how Grid handles the the page structure while Flexbox handles the arrangement of items within a smaller component like the header.
CSS3 Topics