This content originally appeared on DEV Community and was authored by Jangya satapathy
Creating responsive layouts is a common challenge for web developers. In this blog, we'll explore how to achieve a specific responsive design using different CSS techniques, focusing on why CSS Grid is the best approach for this particular layout.
The Challenge
We need to create a layout where:
Desktop View:
-
DIV 1andDIV 3stack vertically on the left, each taking 50% of the left column. -
DIV 2takes up the full height of the right column.
Mobile View:
- All three divs stack vertically.
Why Flexbox Falls Short
Flexbox is excellent for one-dimensional layouts but struggles with complex two-dimensional layouts like ours. Here's why:
<div class="container">
<div class="item">DIV 1</div>
<div class="item">DIV 2</div>
<div class="item">DIV 3</div>
</div>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
}
.item {
background-color: #40c4ff;
color: white;
padding: 20px;
text-align: center;
box-sizing: border-box;
}
.item:nth-child(1),
.item:nth-child(3) {
flex: 1 1 calc(50% - 10px);
}
.item:nth-child(2) {
flex: 1 1 50%;
}
@media (max-width: 768px) {
.item {
flex: 1 1 100%;
}
}
Issues with Flexbox
In this flexbox setup:
-
DIV 2cannot automatically adjust its height to match the combined height ofDIV 1andDIV 3. - Flexbox is primarily for one-dimensional layouts (either row or column), not complex two-dimensional arrangements.
The CSS Grid Solution
CSS Grid excels at creating two-dimensional layouts, making it perfect for this challenge.
<div class="container">
<div class="item">DIV 1</div>
<div class="item">DIV 2</div>
<div class="item">DIV 3</div>
</div>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 10px;
padding: 10px;
}
.item {
background-color: #40c4ff;
color: white;
padding: 20px;
text-align: center;
box-sizing: border-box;
}
.item:nth-child(1) {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.item:nth-child(2) {
grid-column: 2 / 3;
grid-row: 1 / 3;
}
.item:nth-child(3) {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
@media (max-width: 768px) {
.container {
display: flex;
flex-direction: column;
}
.item {
width: 100%;
}
}
Explanation
Grid Layout:
- Defines a grid with two columns and two rows.
- Positions
DIV 1in the first column and first row. - Positions
DIV 2in the second column, spanning two rows. - Positions
DIV 3in the first column and second row.
Responsive Design:
- For screens 768px or narrower, the layout switches to flex, stacking items vertically.
Conclusion
While Flexbox is great for simpler, one-dimensional layouts, CSS Grid provides the power and flexibility needed for more complex, two-dimensional designs. By using CSS Grid, we can easily achieve the desired responsive layout with minimal code and maximum control.
Feel free to adapt this example to suit your own projects, and enjoy the benefits of using CSS Grid for your responsive layouts!
This content originally appeared on DEV Community and was authored by Jangya satapathy
Jangya satapathy | Sciencx (2024-07-14T17:58:53+00:00) Mastering Responsive Layouts: Achieving Complex Designs with CSS Grid. Retrieved from https://www.scien.cx/2024/07/14/mastering-responsive-layouts-achieving-complex-designs-with-css-grid/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.