Responsive Grid Design I am looking to transform my grid desktop view into a responsive layout for mobile and tablets using media queries in CSS. While it looks great on desktop, it does not adjust well on smaller screens.
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto;
gap: 25px;
}
/** Media Queries **/
@media screen and(max-width: 400px) {
.grid-container {
grid-template-columns: auto;
}
.grid-container .item-1 {
grid-column: 1 / span 5;
grid-row: 1;
}
}
I have set up a grid with 5 columns for displaying 5 different items (cards). Item 1 spans the first three columns, Item 3 spans from row 1 - 3, and Item 5 spans from column 2 - 5.
.item-1 {
grid-column: 1 / span 3;
grid-row: 1;
height: auto;
background-color: hsl(263, 55%, 52%);
position: relative;
}
.card-detail {
position: absolute;
top: 59px;
}
.item-3 {
grid-column-start: 5;
grid-row-start: 1;
grid-column-end: 6;
grid-row-end: 3;
background-color: hsl(0, 0%, 100%);
}
.item-5 {
grid-column-start: 2;
grid-column-end: 5;
background-color: hsl(219, 29%, 14%);
color: hsl(0, 0%, 100%);
}
For mobile devices, I intend to make each grid item fill 100% of the width. On tablets, I want the items to take up 50% width (occupying 2 items per row).