CODEWITHSUNDEEP
htmlcsslayoutcss-grid
Remi Fokz
Remi Fokz

Reputation: 131

How adaptive set items in rows

I have arrays of cards, card can take or 25% wide of screen, or 50%. So its objects like this : { name: 1, size: 25% }. After filtering array via js im getting a new array of cards and i need layout cards in grid in rows with wide 100%. So it can take 25 50 25, 50 50, 25 25 50 ...ect. So i think it can be make with grid-auto-flow property. But im not so good with grids yet.

.cards {
  display: grid;
  width: 100%;
  grid-auto-flow: row dense;
}
.card {
  border: 1px solid #d1d1d1;
  width: 25%;
}
.card-wide {
  width: 50%;
}

https://codesandbox.io/s/23moj6z09y

Upvotes: 1

Views: 134

Answers (2)

Temani Afif
Temani Afif

Reputation: 272807

You can consider 1fr for the unit and then tell if an element will span one or two columns:

.cards {
  display: grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-flow:dense;
}
/*will take one column by default*/
.card {
  background:red;
}
.card-wide {
  grid-column:span 2; /*two column*/
  background:green;
}

.cards  > div {
  min-height:50px;
  border:1px solid;
}
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card-wide"></div>
<div class="card"></div>
<div class="card-wide"></div>
<div class="card"></div>
<div class="card-wide"></div>
<div class="card"></div>
<div class="card-wide"></div>
<div class="card"></div>
<div class="card"></div>
</div>

Upvotes: 1

kukkuz
kukkuz

Reputation: 42352

You can have a 4-column layout using grid-template-columns: repeat(4, 1fr) and the card-wide elements can occupy two columns using grid-column: span 2 - see demo below:

.cards {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px; /* set a row height for illustration */
  grid-auto-flow: row dense; /* not compulsory here */
}

.card {
  border: 1px solid #d1d1d1;
}

.card-wide {
  grid-column: span 2; /* occupy two columns*/
}
<div class="cards">
  <div class="card"></div>
  <div class="card card-wide"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card card-wide"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card card-wide"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card card-wide"></div>
  <div class="card"></div>
  <div class="card card-wide"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card card-wide"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card card-wide"></div>
  <div class="card"></div>
</div>

Upvotes: 1

Related Questions