NOTE: This is not a duplicate as the layout order for columns and rows is specifically tailored for mobile devices.
I am attempting to showcase this grid design on mobile devices with the following sequence:
- First row: header (1 column, full width)
- Second row: main (1 column, full width)
- Third row: aside (1 column, full width)
- Fourth row: alerts and weather (2 columns, 50% width each)
- Fifth row: categories and about (2 columns, 50% width each)
- Sixth row: footer (1 column, full width)
Initially, I am uncertain if this layout is feasible as I am unable to implement it successfully.
I can achieve a single column per row on mobile devices, but arranging it in this specific order has been quite challenging. Despite experimenting with various solutions for the past three days, I have not been able to make it work.
Below is the HTML code for the layout:
<div class="angry-grid">
<header>header here</header>
<main>main here</main>
<aside>aside</aside>
<section id="alerts">alerts here</section>
<section id="weather">weather here</section>
<section id="categories">categories here</section>
<section id="about">about us here</section>
<footer>footer here</footer>
</div>
Here is an example of the desired outcome: https://i.sstatic.net/GbjA5.png
Additionally, the CSS snippet where the issue arises is provided below:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.angry-grid {
display: grid;
grid-template-rows: auto 1fr auto auto;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
"header header header header"
"main main main aside"
"alerts weather categories about"
"footer footer footer footer";
gap: 0px;
height: 100%;
}
header {
background-color: #779999;
grid-area: header;
height: 50px;
}
main {
background-color: #8dd9b5;
grid-area: main;
}
aside {
background-color: #dd9b95;
grid-area: aside;
}
#alerts {
background-color: #ae69d5;
grid-area: alerts;
height: 200px;
}
#weather {
background-color: #b5e5eb;
grid-area: weather;
height: 200px;
}
#categories {
background-color: #6e7c57;
grid-area: categories;
height: 200px;
}
#about {
background-color: #b5ba58;
grid-area: about;
height: 200px;
}
footer {
background-color: #bdfb59;
grid-area: footer;
height: 50px;
}
@media (max-width: 767px) {
.angry-grid {
grid-template-areas: "header" "main" "aside" "alerts weather" "categories about" "footer";
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 50% 50% 1fr;
}
}
At this point, I am nearly considering reverting to building web layouts using old-school 1995 HTML tables ;)