CSS Flexbox with 3 columns and a grid layout of 4 by 4, with one large item included

Question

CSS Flexbox with 3 columns and a grid layout of 4 by 4, with one large item included

I am currently exploring how to implement this layout using Flexbox. So far, I have only managed to come up with the following code snippet:

https://i.sstatic.net/mKVlu.jpg

Is there a way to achieve this purely through CSS without altering the HTML structure, considering it is generated using a PHP foreach loop?

Would utilizing CSS grid be beneficial in this scenario?

.grid {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}

.photo {
  position: relative;
  flex: 0 0 calc(25% - 20px);
  margin: 10px;
  align-self: flex-start;
  overflow: hidden;
  background: black;
}

.photo:after {
  content: "";
  display: block;
  padding-top: 100%;
}

.large {
  flex: 0 0 calc(50% - 20px);
}

<div class="grid">
  <div class="photo large"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
</div>

html css flexbox css-grid

Answer 1

Answer №1

When working with square images, it is important to position the larger image on the right and use a padding-top trick for the smaller images to control the height of the larger one.

To achieve this layout, apply padding to the grid container to keep the smaller images on the left side while creating space for the larger image on the right.

Don't forget to adjust the size of the smaller images to be 50% of the available space rather than 25%.

Check out the code snippet below:

.grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding-right: 50%;
}

.photo {
  position: relative;
  flex: 0 0 calc(50% - 20px);
  margin: 10px;
  overflow: hidden;
  background: black;
}

.photo:not(.large):after {
  content: "";
  display: block;
  padding-top: 100%;
}

.large {
  position: absolute;
  right: 0;
  width: calc(50% - 20px);
  height: calc(100% - 20px);
}

<div class="grid">
  <div class="photo large"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
</div>

Answer 2

When working with square images, it is important to position the larger image on the right and use a padding-top trick for the smaller images to control the height of the larger one.

To achieve this layout, apply padding to the grid container to keep the smaller images on the left side while creating space for the larger image on the right.

Don't forget to adjust the size of the smaller images to be 50% of the available space rather than 25%.

Check out the code snippet below:

.grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding-right: 50%;
}

.photo {
  position: relative;
  flex: 0 0 calc(50% - 20px);
  margin: 10px;
  overflow: hidden;
  background: black;
}

.photo:not(.large):after {
  content: "";
  display: block;
  padding-top: 100%;
}

.large {
  position: absolute;
  right: 0;
  width: calc(50% - 20px);
  height: calc(100% - 20px);
}

<div class="grid">
  <div class="photo large"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
</div>

Answer 3

Answer №2

To implement this solution, utilize the power of css grid, but take into consideration its compatibility with Internet Explorer when using it.

.grid {
  display: grid;
  grid-gap: 10px;
  width:100vw;
  height:100vh;
  grid-template: "item1 item2 large large" "item3 item4 large large";
}

.photo {
  background: black;
}
.large {
  grid-area:large;
}
.photo:nth-of-type(2){ grid-area:item1;}
.photo:nth-of-type(3){ grid-area:item2;}
.photo:nth-of-type(4){ grid-area:item3;}
.photo:nth-of-type(5){ grid-area:item4;}

<div class="grid">
  <div class="photo large"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
</div>

Answer 4

To implement this solution, utilize the power of css grid, but take into consideration its compatibility with Internet Explorer when using it.

.grid {
  display: grid;
  grid-gap: 10px;
  width:100vw;
  height:100vh;
  grid-template: "item1 item2 large large" "item3 item4 large large";
}

.photo {
  background: black;
}
.large {
  grid-area:large;
}
.photo:nth-of-type(2){ grid-area:item1;}
.photo:nth-of-type(3){ grid-area:item2;}
.photo:nth-of-type(4){ grid-area:item3;}
.photo:nth-of-type(5){ grid-area:item4;}

<div class="grid">
  <div class="photo large"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
</div>

CSS Flexbox with 3 columns and a grid layout of 4 by 4, with one large item included

Answer №1

Answer №2

Similar questions

Place objects at the bottom of the container

Inconsistency in css asset URLs across various pages discovered while working with Rails

Exploring Angular 2 Tabs: Navigating Through Child Components

A Step-by-Step Guide to Downloading Images by Clicking

Is there a way to eliminate unknown white gaps in the content?

Utilize Ajax to open and close an HTML tag within separate div elements

JavaScript Glitches

Utilizing a lone div for clearing a float

Using Angular material to display a list of items inside a <mat-cell> element for searching

having difficulties in separating the mat-table header

Executing the Javascript function specified above upon the page being loaded

Enhance each category changing with jQuery page transitions

html displaying dynamic data in a table

Jquery Fails to Execute When Clicking on Radio Button

What causes text inside a fieldset to sometimes appear bigger when viewed on mobile devices?

Display iframe as the initial content upon loading

What is the best way to combine a string with a variable in sass?

Creating Dynamic Web Design: Horizontal Scrolling Window and Adaptive HTML Content

Is it possible for me to utilize code blocks within the head content and link tags to make reference to specific themes

Is it possible to filter an array of data using a dropdown in Angular without using a pipe?