Grid desktop viewI want to make this grid desktop view responsive on mobile devices using media queries in my CSS. It's perfectly positioned in desktop but it's not responsive on mobile and tablets.
.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 created a grid with 5 columns for 5 different items (card). Then Item 1 spans the first three columns. Item 3 span from row 1 - 3 and Item 5 span 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%);}I want the width of each grid item to span a width of 100% on mobile devices. On tablets I want the grid items to span 50% (that's 2 items in each row).