Equal-height columns in a responsive grid system

I'm currently facing an issue with a layout that seems simple

I am working on a design featuring 4 headline boxes. In the "desktop" view, all 4 boxes need to be of equal height. The same applies when viewed across 2 boxes in the "tablet" mode. However, in the full width "mobile" view, the height of the boxes is not a concern.

To demonstrate what I have so far and how it responds, I have created a Fiddle:

https://jsfiddle.net/c5oumq2z/

The following code snippet represents the div meant to contain a background color for the content and provide margin adjustments as columns respond:

<div class="report_v3_summary_box">

If anyone has any suggestions or advice on this matter, I would greatly appreciate it.

Thank you!

cssresponsive-designgrid-layout

Answer №1

In my perspective, you have two choices: CSS or JavaScript.

If you opt for Javascript, you can utilize a jquery plugin like matchheight.

For those who prefer CSS, you can achieve the desired effect using the flexbox property. A very helpful guide to flexbox can be found here. Check out an example here (located at the bottom).

All you really need to do is add the following styles to the parent container (which is the row in your scenario):

flex-wrap: wrap;
display: flex;

Then apply the following style to .report_v3_summary_box:

height: 100%;

Lastly, move the margin-bottom to the element with class .col.l3.m6.s12.

Answer №2

Given that it is currently 2021, the use of "Grid" for web design may be beneficial.

For a simple example with minimal effort, follow this link:

https://jsfiddle.net/herrfischerhamburg/ym2rc6tm/1/ (Ensure to resize the browser window for a responsive display)

Here's an example CSS code snippet for creating a 1 x 4 columns grid:

.grid-container {
    grid-template-rows: 1fr; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
}

Seems simple enough, right?

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

Is your CSS failing to synchronize with HTML?

Greetings from MyWebsite.html! <DOCTYPE !html> <html> <head> <title>My Website</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- CSS --> <link rel="stylesheet" href="MyWebsite ...

htmlcss

Tips for making a horizontal grid layout with three items in each row

I have a scenario where I need to render a group of Player components using map() loop, and I want them to be displayed horizontally side by side using a Grid component from material-ui. Currently, the components are rendering in a vertical layout: https ...

javascriptcssreactjsgridmaterial-ui

Aligning image vertically

I'm working on aligning an image vertically in my header. Currently, it's horizontally centered. header { background-color: blue; height: 118px; width: 1024px; text-align: center; } .container { margin-left: auto; margin-right: aut ...

htmlcssalignment

Enhanced Firefox functionality with support for multiple columns

It has come to my attention that Internet Explorer 9 and older versions do not support multiple columns. However, even with the latest version of Firefox, I am experiencing issues with this website loading correctly. Do you have any insight into what might ...

cssfirefoxresponsive-designmultiple-columns

Is there a way to customize the background color of the active list item class in Bootstrap 4?

Customizing Boostrap Code : <!-- Custom Sidebar --> <div class="bg-light border-right" id="sidebar-wrapper"> <div class="sidebar-heading"><strong><?= __('Admin Panel') ?></strong></div> <div class="li ...

css

nyroModal automatically adapts its dimensions according to the size of the webpage, not the size of

A situation has arisen with a link that opens an image using nyroModal. While everything is functioning correctly, the Modal window appears in the center of the page instead of aligning with the middle of the browser window. As a result, only the upper por ...

javascriptjqueryhtmlcssnyromodal

Stop the page from scrolling

I'm trying to find a way to disable page scrolling, so I used this style for the body: overflow: hidden; Surprisingly, it worked perfectly on desktop but had no effect on mobile devices. After checking out this resource, it seems that creating a ch ...

htmlcss

Displaying postcode on a category page: A step-by-step guide

I would like to showcase the user input code and present it on the web exactly as entered. <?php #code... ?> Any assistance is greatly appreciated. Please excuse my English. Thank you! ...

javascriptphphtmlcss

What is the method for customizing the background color in a .vue file using Bootstrap?

Can anyone assist me in updating the background color of a div class from grey to white? The code is within a .vue file using Bootstrap and includes an enclosed SVG file. Here's the snippet: <div class="text-left my-3 bg-white"> <button var ...

htmlcssvue.jsvisual-studio-code

Issue: Inability to scroll on div overflow section

My website consists of one static page with an HTML and CSS file. Oddly enough, when testing the page and inputting content into a multiline textarea until it overflows, the browser fails to display a scrollbar. Despite inspecting the div with the id &apos ...

javascripthtmlcssbrowserscroll

What is the best way to format FormControl for proper spacing?

<FormControl fullWidth component="fieldset" inputRef={register({ required: true })}> <FormLabel component="legend">Format</FormLabel> <RadioGroup row aria-label="format&q ...

cssmaterial-ui

Sending information to the styles feature in Angular 2

Is there a way to transfer data from an Angular tag to the styles in the @Component? Take a look at my component: import { Component, Input } from '@angular/core'; @Component({ selector: 'icon', template: `<svg class="icon"> ...

cssangular

Using CSS styles in emails can lead to an unexpected horizontal scrolling effect

I am currently working on an application using Symfony, and I have implemented a basic confirmation email with minimal CSS styling. However, the email template is causing horizontal scrolling due to the layout. Below is the HTML code of my email template: ...

cssemailstylesmailer

CSS3 pulsating circular Firefox bug

I am currently working on a CSS3 pulsing circle (animating scale to 1.1). To address a jumpy animation issue in Firefox, I have added a slight rotation. animation: button_pulse 2s infinite ease-out; transform: scale(1.1) rotate(0.1deg); Despite this adju ...

firefoxcss

Shifting an image within a div using HTML5 and CSS3

I am wondering how to position the image 50px from the top and 50px from the left within the div. Should I use padding for this? <header> <img src="logo.png" alt="" /> </header> header { width... height: background: (url) } ...

htmlcss

Animate text and div elements with bounce or fade-in effects when they appear on the screen in a React application

Animating the elements of my website is a simple task for me, however I am looking to have them animate only when they are visible on the screen without relying on pixels or offsets. I want the animations to be responsive, even in phone mode, without hav ...

cssreactjsanimationwow.js

Tabulator filter - Enhancing CSS elements for a unique touch

Is there a way to customize the CSS elements of filters used in tabulator.js? Specifically, I am looking to: Apply different background colors to text filters Add a down arrow on the right side of each drop-down filter box I have included a screenshot ...

csstabulator

Placement of Buttons Inside a Division Tag

Is there a better way to align button 3 & 4 in a vertical column next to button 1 & 2 without using tables in CSS? See the working example below: https://jsfiddle.net/Jaron787/0te3cs66/1/ Code: HTML <div id="lse" class="display"> <di ...

htmlcss

The reload button retains functionality while being present within an Angular2 form, allowing for a seamless user experience. The

After some observation, I have realized that when a button is placed inside a form but has no connection or function related to the form, such as a back or cancel button, it unexpectedly reloads the entire page. For instance, let's consider having ...

htmlcssangular

The accordion won't function properly if it is added using append() after the document is ready

I have implemented a button to add an accordion, but unfortunately it doesn't seem to be working properly. I am unsure of how to troubleshoot and resolve this issue. If the accordion HTML is appended after the document.ready() function, then the accor ...

jqueryhtmlcss