CSS grid columns

Question

I have this code:

.four-items-across-container{
    display:grid;
    grid-template-columns:0px 80% 1fr; 
}

I was wondering when I resize the page at width of 800px for example the 1fr column can get another row without media query?

If yes, how?

how you will do it with media query? saying 1fr in the next row isn't very clear — Temani Afif
– Temani Afif, Commented Oct 25, 2018 at 14:17
jquery checking how big your width is and according to the width change your grid to get multiple rows? — Ramon de Vries
– Ramon de Vries, Commented Oct 25, 2018 at 14:18
Oh well im new with css grid and i have no idea how to solve this ! In the left 80% there are some products and 1fr (20%) is an cart. I want that cart to go bottom when the screen is to small! — Farcașanu Vasile
– Farcașanu Vasile, Commented Oct 25, 2018 at 14:27

Temani Afif · Accepted Answer · 2018-10-25 14:33:50Z

1

I think flexbox is more suitable for this

.container {
  display: flex;
  height:100px;
  flex-wrap:wrap;
  width:100%;
}
.container > div:first-child{
  flex:1 1 80%;
  background:red;
}
.container > div:last-child{
  flex:1 1 20%;
  background:blue;
  min-width:100px; /*adjust this like you want*/
}

/*to illustrate*/
.container:hover {
  width:40%;
  transition:1s all;
}

<div class="container">
  <div></div>
  <div></div>
</div>

answered Oct 25, 2018 at 14:33

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS grid columns

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related