Unique style CSS (Flex)Grid with spacing and uniform aspect ratio

Hello everyone, typically I'm quite skilled when it comes to CSS but this particular challenge has pushed me to my limits.

I have a desire to create a grid where all elements maintain the same aspect ratio (with images that already share this aspect ratio) and have padding or margin between them.

It may sound simple, but what I envision is something like this: https://i.sstatic.net/aROjJ.png

To break it down:

  1. The first picture should be twice as big as the second
  2. All pictures need to maintain the same aspect ratio
  3. There should be a 30px distance between the pictures
  4. On mobile devices, they should stack on top of each other with each taking up 100% width - which I've managed without issue

I've come close to achieving the desired look, but haven't quite hit the mark.

In addition, this layout needs to be responsive across various screen sizes, adjusting based on the screen or container width.

I attempted using flex and flex-grid, however, my efforts were unsuccessful.

Has anyone successfully accomplished this and can offer guidance on how to solve this? Thank you!

cssflexboxcss-gridaspect-ratio

Answer №1

photo number 1 needs to be double the size of photo number 2

I believe this guideline can only be partially followed.

all photos must maintain the same aspect ratio

This is not feasible because a large image cannot have the same height as two smaller images with the same aspect ratio, especially with a 30px gap in between.

Outcome

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.item {
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
  font-weight: 700;
  color: #FF0000;
  background: #333333;
}

.item--big {
  grid-column: span 2;
  grid-row: span 2;
}

.item--right {
  grid-column-end: -1;
}

.item__inner {
  height: 0;
  padding-bottom: 50%;
}

.item__content {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

@media (max-width: 750px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .item--big {
    grid-column: span 1;
    grid-row: span 1;
  }
}
<ul class="grid">
  <li class="item item--big">
    <div class="item__inner">
      <img class="item__content" src="https://picsum.photos/536/354">
    </div>
  </li>
  <li class="item">
    <div class="item__inner">
      <img class="item__content" src="https://picsum.photos/536/354">
    </div>
  </li>
  <li class="item">
    <div class="item__inner">
      <img class="item__content" src="https://picsum.photos/536/354">
    </div>
  </li>
  <li class="item item--big item--right">
    <div class="item__inner">
      <img class="item__content" src="https://picsum.photos/536/354">
    </div>
  </li>
  <li class="item">
    <div class="item__inner">
      <img class="item__content" src="https://picsum.photos/536/354">
    </div>
  </li>
  <li class="item">
    <div class="item__inner">
      <img class="item__content" src="https://picsum.photos/536/354">
    </div>
  </li>
</ul>

You can find the same code on CodePen

https://i.sstatic.net/TDmeX.png

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

Issues with Drop Down CSS on Laravel Blade files

In my view, I have included various drop down menus such as https://i.sstatic.net/0UHgE.png Click here to access I am struggling to display a border bottom. I have attempted to manually define border-bottom in the CSS of those elements but have not been ...

htmlcss

When viewed on mobile devices, two 100vh sections are overlapping each other

My goal is to create two sections that fill the entire viewport height in the browser. The code below is functioning properly on the desktop version. However, on mobile devices, the content of section two (consisting of 3 bootstrap columns with text) is ov ...

htmlcsstwitter-bootstrapresponsive

Utilizing CSS3 transformations for a symbol

I'm currently attempting to implement a CSS transformation on an icon (glyph) within a :before pseudo element. My primary objective is to execute a simple "flip" animation on the icon using transform: scale(-1, 1), but I am encountering difficulties ...

htmlcss

How can you horizontally align a collection of elements using CSS?

I'm struggling to align a paragraph element with a group of button elements using jQuery and CSS. This is my issue: My goal is to have all these elements on the same horizontal line at the top of the screen to make the most of the pixel real-estate. ...

javascriptjqueryhtmlcss

create a gentle appearance for an element

I am looking to replicate the visual appearance of each page on this particular website: There is something about the lighting that I really admire. I have attempted to recreate the animation, but I have been unsuccessful in my attempts. Any assistance wo ...

cssanimation

Unique CSS shadow design & alternative solutions

I'm currently working on some HTML/CSS code and I am looking to implement a unique shadow effect with a custom width and height around a div element. https://i.sstatic.net/3SnXV.png Could anyone provide guidance on the most effective method to ach ...

htmlcssshadow

The button component is unresponsive

An app was developed with a component containing signin and signup buttons on the right side. However, there is an issue where the Sign up button is not clickable. Below is the code snippet for the component => import React from "react"; expo ...

cssreactjsbuttonclickable

What are the best practices for preloading images, JavaScript, and CSS files?

Back in the late 90's, I was really passionate about creating websites from scratch. However, as I dove back into web development recently, I realized how much the landscape has changed since then. As more of a designer than a developer, I opted to us ...

phphtmlcss

Header should elegantly glide up and down as the user scrolls through the page

I've implemented a top div on my page that houses contact details and social media links. I've managed to hide it during scrolling and make it reappear when reaching the top of the page. However, I'm hoping to smoothen this transition with a ...

javascriptjqueryhtmlcssbootstrap-4

SQL Query: Change text color based on the result number retrieved

After executing my SQL SELECT statement, I want to display every record in a div using a While statement. I would like the divs to alternate in color, for example: Result 1 = white div Result 2 = grey div Result 3 = white div Result 4 = grey div. I am un ...

phpsqlcssselecthtml

The nested navigation link disappears suddenly on Internet Explorer 9

This query closely resembles another issue: Nested menu keeps vanishing on IE 8 & 9. However, the solution provided is quite limited. Why do my nested menus disappear before I can reach them with my cursor unless I move it swiftly? This peculiar behavi ...

cssinternet-explorer-9nav

Embed a Style-sheet into an Iframe (Facebook Like Box)

I'm facing the challenge of customizing a Facebook like box with predefined image sizes and borders that don't align with our design. I want to override some styles to make it more suitable for our website. The Likebox is currently embedded via ...

javascriptjquerycssfacebook-like

Tips for automatically inserting a "read more" link once text exceeds a certain character count

Currently utilizing an open-source code to fetch Google reviews, but facing an issue with long reviews. They are messing up the layout of my site. I need to limit the characters displayed for each review and provide an option for users to read the full rev ...

javascriptjqueryhtmlcss

NextJS - Fullcalendar is experiencing issues with loading its style completely

I'm currently working on integrating FullCalendar into a Next.js 13 project (T3 Stack) and facing an issue where the style fails to load properly upon navigating back to the page containing my FullCalendar component for the second time. What I'v ...

cssnext.jsfullcalendar

Modifying a single element within a class with Jquery

Is it possible to create a stack of pages on a website using JQuery? I found this image that shows what I'm trying to achieve: image. Instead of applying ID css for each page, I'd like to use JQuery. While researching similar questions, I came ac ...

javascriptjquerycssstackpositioning

Can a circular image be created with text positioned to its right?

Hey there, hope everyone is well. I'm attempting to achieve a layout similar to the one in this image: https://i.sstatic.net/Y6wa4.png The text should be positioned on the right side of the image, without a large white space separating them. ...

htmlcssbootstrap-4

What is the best way to position a bigger character directly above a smaller container?

My goal is to center a single character, using CSS, in a span that is smaller than the character itself. The setup I have is: <span id="A">X</span><span id="B">Y</span><span id="C">Z</span> All three spans are styled ...

htmlcsscentering

Color the text differently if the values are not the same (CSS and jQuery only)

In my code snippet below, you can see a set of HTML elements with specific classes and values: <div class="verizon-data-duplicate-device-key-89148000004605691537 k-content k-state-active" style="float: left; opacity: 1; display: block; ...

htmljquerycss

Altering the background color of :after while :before is being hovered over

Is it possible to modify the :after section when hovering over the :before part? Take a look at this image for reference: I want to alter the small triangle shape when the large square is being hovered over. The square uses the :before pseudo-element and ...

css

Is there a problem with the way divs are being displayed when using jQuery to show the first 12 elements with the class "hide-show"?

I am encountering a problem with displaying data using the jQuery slice() and show() methods to reveal dynamically generated divs from a PHP function. The code is as follows: <style> .hide-show { display :none; } </style> <div class="c ...

javascriptphpjquerycsscodeigniter