Successfully executing complex designs using CSS grid or flexbox

Question

Successfully executing complex designs using CSS grid or flexbox

I have a specific responsive layout that I need to achieve using a series of div tags. Below is the HTML structure I have:

<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>

For larger screens, it should display as 4 columns only, with columns 4-7 forming a mini grid within themselves and hiding columns 8 and above.

https://i.stack.imgur.com/sflf6.jpg

On smaller screens, the columns should simply be displayed in sequence without any special arrangement, which should be straightforward to implement and does not require assistance.

https://i.stack.imgur.com/2vDcX.jpg

I prefer to utilize a CSS grid system if possible, but am open to using flexbox if necessary. It's crucial that no nested divs are used unless they can easily be expanded via CSS to display appropriately on smaller screens as shown in the example images.

Is the above scenario achievable? My current attempts have been unsuccessful.

css flexbox css-grid

Answer 1

Answer №1

adjust the layout to have the larger items span 2 rows and 2 columns:

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

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

/* for larger screens*/
@media (min-width: 700px) {
   /* expanding the first 3 items */
  .container> :nth-child(-n + 3) {
    grid-area: span 2/span 2;
  }
  /* hiding elements starting from the 8th item */
  .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>

Answer 2

adjust the layout to have the larger items span 2 rows and 2 columns:

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

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

/* for larger screens*/
@media (min-width: 700px) {
   /* expanding the first 3 items */
  .container> :nth-child(-n + 3) {
    grid-area: span 2/span 2;
  }
  /* hiding elements starting from the 8th item */
  .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>

Successfully executing complex designs using CSS grid or flexbox

Answer №1

Similar questions

Mobile Mode Issue with Bootstrap 4 Navbar Example

Is it possible to categorize elements for focus and onblur events?

Grid layout with Tailwind

When using jqueryprint.js to print from Firefox browser, an additional blank page appears before the content

Using HTML and CSS to create a line break between div elements

Tips for identifying if the cursor is hovering over the :before or :after section of an element

Enhancing Your WordPress Menu with Customized Spans

Arranging block-level elements in a horizontal format

Delete chosen border from photo in html

Nested divs with independent scrolling capabilities

Try using Bootstrap 4 Carousel columns instead of the traditional carousel-item

What is the correct way to run javascript on a DOM element when ng-show is triggered?

What is the best way to display Bootstrap dynamic tabs in a single row without them overflowing and requiring a scroll button to access all the tabs

What is the method for obtaining the CSS text content from an external stylesheet?

Tips for changing the color of shapes when hovering over an image state

Is it possible to create a list item animation using only one div element?

The hamburger menu unexpectedly appears outside the visible screen area and then reappears at random intervals

Tips for customizing the background color and image of a toaster

How can I implement changing the page background color based on different routes in ReactJS and React Router?

What is the best way to incorporate regular, light, and bold fonts into your project using links from Google Fonts