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:

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>

htmlcssflexboxcss-grid

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to navigate through an XML document within the DOM of an HTML

I am facing an issue with HTML code. My goal is to navigate through an XML document directly from within the HTML code. Here is the XML code: <?xml version = "1.0"?> <planner> <year value = "2000"> <date month = "7" day = " ...

javascripthtmlxmldom

Utilize Multidimensional Arrays in HTML

I have a pair of fields called url and id. <input type='url' name='data[web][url]'><input type='number' name='data[web][id]'> <input type='url' name='data[web][url]'><input t ...

phphtmlarrays

In Outlook, images are always shown in their true dimensions

While everything is working perfectly fine in Gmail, Yahoo, and Hotmail, there seems to be an issue with the display of the logo image on Outlook. The custom width and height settings are not being applied properly, resulting in the logo being displayed ...

asp.nethtmlcssemailoutlook

Learn the process of extracting a particular value from JSON data and displaying it in HTML by utilizing AngularJS's ng-repeat directive

As a newcomer to angularjs, I am encountering difficulties retrieving and displaying a specific value from a json file in order to showcase it on my view page using angularjs ng-repeat for image source. My goal is to repeat the json file based on a particu ...

javascriptjqueryhtmljsonangularjs

I'm having trouble getting my dropdown content to align properly with my centered search bar. Any suggestions on how to fix this issue?

How can I align the dropdown content to the center in its td element? I haven't included all of my code here, so feel free to ask if you need more information. The search bar is supposed to be at the center of this table navbar. This is the HTML: &l ...

htmlcss

Tips on making a fresh form appear during the registration process

After clicking on a submit button labeled as "continue" within a form, a new form will appear for you to complete in order to continue the registration process. ...

javascriptjqueryhtml

Tips on how to prevent certain classes from being impacted by a hue-rotate filter applied to all elements on a webpage

I am currently in the process of adding a feature that allows users to choose between a dark or light theme, as well as select a specific theme color for the app. The implementation involves using CSS filters such as invert(1) for the dark theme and hue-ro ...

javascripthtmlcss

Tips for designing a multi-level dropdown navbar

I am currently facing an issue with designing a navbar. I am aiming for Multi-Level Dropdowns, but whenever I click on More Services, it automatically closes the main dropdown menu. I have experimented with various approaches, but none of them seem to be ...

javascripthtmlvue.jsvuejs3bootstrap-5

Adjust the background color of JQuery UI modal dialog overlay in real-time

How can I dynamically change the background color of a page when a modal dialog loads, specifically targeting only one specific modal dialog? Setting the background color with CSS works fine: .ui-widget-overlay { background-color: white; } Here's ...

jquerycssjquery-uimodal-dialog

Using jQuery and JSON data to dynamically populate a second dropdown menu with filtered options

I am working on a form with two drop-down menus and a text box. The first drop-down contains static values, while the second drop-down is populated dynamically from a JSON array. My goal is to filter the options in the second drop-down based on the selecti ...

javascriptjqueryhtmljson

Listening for JS events on a CSS class called "int-only" which only accepts

Having an issue: I'm encountering a problem with this PHP code: <?php for($i = 0; $i < sizeof($floating_ips_json["floating_ips"]); $i++){ ?> <tr class="details-control-<?php echo $i; ?> cursor-pointer"> <t ...

javascriptphpcss

PHP unable to retrieve ID from URL

Is there a way to extract an id from the URL when clicking a button for the purpose of deleting an item from a session? I have tried using $_GET but it doesn't seem to work. <form action="Shop.php?id= <?php echo $values["ProductCode"]; ?>" m ...

phphtml

Creating an AI adversary for a simple Tic Tac Toe game board: a step-by-step guide

Being new to programming, I recently completed a basic Tic Tac Toe gameboard successfully. However, as I progress to the next phase of my assignment which involves implementing an AI opponent, I encountered several challenges. As a novice in programming, ...

javascripthtmlcss

Exploring the capabilities of rowGroup within DataTables

Currently, in the process of completing a project, I am retrieving data from a REST API to populate my DataTable. To avoid displaying duplicate items, I am interested in creating subrows in the DataTable with a drop-down menu based on an item in the "Deliv ...

javascripthtmljqueryajaxdatatables

PHP Blank JSON Object Page

Whenever I try to print an array, everything seems fine – it actually prints out. The issue is that instead of displaying as JSON Objects, the page turns up empty. Appreciate any help in advance! <? require_once('include/db_functions.php' ...

phphtmljson

I am currently attempting to create a JavaScript function that searches for the <td> elements within an HTML table. However, the function fails to work properly when there are <th></th> tags included

UPDATE: Scratch that, I managed to solve my issue by creating a separate table for the header to contain all of my <th> tags I am working with an HTML table and I would like to add a search bar to filter through the content since it is quite large. ...

javascripthtmlhtml-table

I seem to be encountering an issue with the image tag while working with HTML code

I have been studying through freecodecamp.org and this is my first tribute project. Everything has been going well, but I am encountering an issue with the image tag. I need to submit my project online, so I have been trying to input image links from Googl ...

htmlcss

The never-ending scroll feature in Vue.js

For the component of cards in my project, I am trying to implement infinite scrolling with 3 cards per row. Upon reaching the end of the page, I intend to make an API call for the next page and display the subsequent set of cards. Below is my implementatio ...

htmlcsstypescriptvue.jsinfinite-scroll

Bootstrap CSS: arranging columns for mobile devices

UPDATE: Having implemented the solution provided in the accepted answer below, I find myself back at square one with the original layout before any adjustments were made. The issue still remains unresolved. Any advice on how to achieve the desired design o ...

htmlcsslayoutresponsive-designtwitter-bootstrap-3

Finding the dynamic width of a div using JavaScript

I have two divs named demo1 and demo2. I want the width of demo2 to automatically adjust when I drag demo1 left to right or right to left. <div class="wrapper"> <div class="demo"></div> <div class="demo2"&g ...

javascriptjquerycssresizablejquery-ui-resizable