CODEWITHSUNDEEP
csscss-grid
Farcașanu Vasile
Farcașanu Vasile

Reputation: 29

CSS grid columns

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?

Upvotes: 0

Views: 40

Answers (1)

Temani Afif
Temani Afif

Reputation: 272648

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>

Upvotes: 1

Related Questions