How to make 2 css grid columns into 1 for mobile without media query?

Question

As title says + I need to keep itemX and itemY in one cell on each device. Is media query the only solution? If there is more of a native css grid way I would love to learn it.

See fiddle: https://jsfiddle.net/forusak/ctg3auh0/

.container {
  display: grid;
  grid-template: repeat(10, auto) / repeat(auto-fit, minmax(250px, 1fr));
  column-gap: 30px;
  color: white;
}

.container>* {
  background-color: #b90011;
  border: 1px solid black;
  padding: 5%;
  height: 20px;
}

.item1 {
  grid-row: 1 / 10;
  height: auto;
}


/* comment out part bellow to see mobile responsivity which is missing here */

.itemX,
.itemY {
  grid-area: 3 / 2 / 3 / 2;
  width: 40%;
}

.itemY {
  margin-left: auto;
}

<div class="container">
  <div class="item1">   </div>
  <div class="item">   </div> 
  <div class="item">   </div>
  
  <div class="itemX"> itemX  </div>
  <div class="itemY">  itemY  </div>
  
  <div class="item">  </div>
  <div class="item">  </div> 
</div>

Can you show a little illustration of the expected output which you're trying to achieve? — Rohit Dalvi, Aug 22 '20 at 15:04
@Rohit As you can see it in fiddle, mobile 1 column, desktop 2 columns, on both should itemX and itemY be on same line as in example when you un-comment the bottom part. — MarkJ, Aug 22 '20 at 18:06
Per your question: *"How to make 2 css grid columns into 1 for mobile without media query?"*, we first need to ask, *"How is the browser / device supposed to know what 'mobile' means without a media query?"*. The only detection currently available in CSS, to my knowledge, are media queries (that's why they exist). — Michael Benjamin, Sep 04 '20 at 13:57
You may find this post useful: https://stackoverflow.com/q/8564752/3597276 — Michael Benjamin, Sep 04 '20 at 13:58

score 1 · Answer 1 · answered Aug 24 '20 at 12:49

Checkout the below code. At screen-width < 464px itemX and itemY will reassemble vertically.

body {
  padding: 1rem;  
}

.res-grid-1 {
  --min-size: 25rem;
  
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min-size), 1fr));
  grid-gap: 1rem;
}

.res-grid-1 > div {
  padding: 5rem 1rem;
  text-align: center;
  font-size: 2rem;
  background: #557571;
  color: #ffffff;
}

.res-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  grid-gap: 1rem;
}

<div class="res-grid-1">
  <div>Item 1</div>
  <div class="res-grid-2">
    <div>Item X</div>
    <div>Item Y</div>
  </div>
</div>

However there is a small bug, between screen-width 1280px and 1328px itemX and itemY are reassembling horizontally(which should be vertically). This is due to nesting of grid;it is possible to achieve responsive CSS grid without media-queries but here you're trying achieve the same for a nested grid without media-queries.

If you wish to use media-queries, you can fix this bug by making following changes to CSS:

In class res-grid-2 replace line:

grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));

with:

grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));

and add:

@media only screen and (max-width: 576px) {
  .res-grid-2 {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
}

How to make 2 css grid columns into 1 for mobile without media query?

1 Answers1