<div class="gridcontainer">
<div class="griditem1">spans all columns</div>
</div>
body {
margin: 0;
padding: 0;
color: white;
font-size: 2rem;
font-family: helvetica, arial;
font-weight: 200;
text-align: center;
}
.gridcontainer {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
}
.griditem1 {
grid-column-start: 1;
grid-column-end: -1; /* will always span to the last line; no matter how many columns there are!*/
/* grid-column-end: 5; would work below 600px to make my div span all columns but not once I have added a column with a media query. I could adjust grid-column-end to 6 within the media query but it is far easier to use -1 */
background-color: green;
height: 200px;
justify-contents: center;
color: white;
font-size: 2rem;
font-family: helvetica, arial;
font-weight: 200;
text-align: center;
}
@media (min-width: 600px) {
.gridcontainer {
grid-template-columns: repeat(12, 1fr); /* I have added extra columns at larger screen sizes!! */
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.