Search code examples
cssflexboxcss-grid

Accomplishing tricky layout in css grid or flexbox

I need to accomplish a certain responsive layout from a sequence of div tags. Below is the html I need to work with:

<div class="container">
  <div>1</id>
  <div>2</id>
  <div>3</id>
  <div>4</id>
  <div>5</id>
  <div>6</id>
  <div>7</id>
  <div>8</id>
  <div>9</id>
</div>

On larger screens it should only 4 columns, where columns 4-7 are displayed in a mini grid of it's own and where columns 8 and above are simply hidden.

For larger screens

On smaller screen, it should simply display a sequence of columns without any special arrangement, this part is straight forward so I shouldn't need help with this part

On smaller screens

My preference is to use css grid system is possible. If not I would be open to using flexbox.

It's important no nested div are used unless they can be easily be expanded via css for smaller screens to display in the format shown above.

Is the above possible? All my attempts falling short.

Solution

  • make the bigger one take 2 rows and 2 columns:

    .container {
  display: grid;
  grid-auto-flow: column; /* a column flow */
  grid-auto-columns: 1fr; /* equal width columns */
}

.container>* {
  border: 1px solid;
  padding: 20px;
  aspect-ratio: 1; /* keep the elements square */
}

/* on big screens*/
@media (min-width: 700px) {
   /* make the first 3 bigger */
  .container> :nth-child(-n + 3) {
    grid-area: span 2/span 2;
  }
  /* hide from the 8th elements */
  .container> :nth-child(n + 8) {
    display: none;
  }
}
    <div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>