Balanced row heights within a CSS grid

Using a basic grid framework like , I have a fixed number of rows. I'm wondering if there's a simple way to ensure that all rows have the same height without explicitly setting the height of the .row class as a percentage.

This is how my row class for 6 rows currently appears:

.row {
    height: 16.666%;
    padding-bottom: 5px;
}

.row:last-of-type {
    padding-bottom: 0;
}

Is there a CSS solution that would automatically adjust the row heights and allow them to fill their container element vertically without specifying height: 16.666%;? I need it to work across IE10 and other common browsers without resorting to using tables or JavaScript.

cssgrid-layout

Answer №1

One effective approach is to utilize the display: table. property.

This method has solid support across browsers, including IE8+.

html,
body,
.wrapper {
  height: 100%;
}
.wrapper {
  display: table;
}
.row {
  display: table-row;
  padding-bottom: 5px;
}
.row:last-of-type {
  padding-bottom: 0;
}
<div class="wrapper">
  <div class="row">
    <div>
      Row 1
    </div>
  </div>
  <div class="row">
    <div>
      Row 2
    </div>
  </div>
  <div class="row">
    <div>
      Row 3
    </div>
  </div>
  <div class="row">
    <div>
      Row 4
    </div>
  </div>
  <div class="row">
    <div>
      Row 5
    </div>
  </div>
  <div class="row">
    <div>
      Row 6
    </div>
  </div>
</div>

An alternative solution without a complex grid system can be found here: JSFiddle

If you prefer a more advanced grid setup, check out this solution on JSFiddle: JSFiddle

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

Having issues with CSS animation keyframes not functioning properly in NextJS

Currently, I have a straightforward component in NextJS that is displaying "HI" upon loading. This component fades in when rendered, but I am facing an issue while trying to pass a prop to make it fade out. The problem lies in the fact that even though the ...

cssnext.jscss-animations

Place images within a card container using Bootstrap 4

I'm currently working with Bootstrap 4 and I am utilizing a card div. The card uses display flex and I am having trouble floating images within it, possibly because the card is configured to only allow one image. How can I successfully float multiple ...

cssbootstrap-4

Flashing white when transitioning background images

My website features a div with a blurred image that I want to gradually unblur upon hovering, using transition-property and transition-duration. I have two versions of the image prepared - one blurred and one unblurred. However, when viewing online (desp ...

htmlcss

A step-by-step guide on using Jquery to fade out a single button

My array of options is laid out in a row of buttons: <div class="console_row1"> <button class="button">TOFU</button> <button class="button">BEANS</button> <button class="button">RIC ...

javascriptjqueryhtmlcssfadeout

creating div elements that are confined within the visible area of the browser

I'm currently attempting to append a specific number of div elements to the body without altering the width or height of the body itself. Essentially, I need the new divs to remain within the viewport. Here is the code I'm working with: divAmou ...

jqueryhtmlcss

The Safari 7.1+ browser seems to be having trouble with the spotlight effect

Why is the CodePen not functioning properly in Safari? Despite working well in Chrome and Firefox, it completely fails to work in Safari 7.1+. Can anyone provide some insights? http://codepen.io/cchambers/pen/Dyldj $(document).on("mousemove", function( ...

javascriptjqueryhtmlcsssafari

creating folding effect using javascript and css with divs

I've been searching high and low on the internet for a solution like this, but so far I haven't had any luck. It seems like there might be a JavaScript script out there that dynamically changes the css -webkit-transform: rotateY(deg) property. ...

javascriptjquerycsscarousel

Tips for creating a subclass using jQuery

I am familiar with selecting the class "myClass" using $(".myClass"), but my question is how do I select the child link within an element with the class "myClass" using jQuery? Here is a sample of the code: <a href=#>Home</a> <div class ...

jqueryhtmlcss

Having trouble with Vuejs Ternary Operator or Conditional in v-bind-style?

Having some unexpected issues while trying to implement a style conditional for items in Vuejs. I have come across Stack Overflow posts on how to use a ternary, either through an interpolated string or a computed style object. I've attempted both met ...

javascriptcssvue.jsconditional-statementsternary-operator

Ways to Export HTML to Document without any borders or colorful text

How can I make a contentEditable area visible when filling text and then disappear when exporting the document? I found a script online that allows you to do this, but the issue is that the contentEditable area is not visible until clicked on. To address t ...

javascripthtmlcssdownloadms-word

Is it possible to export CSS stylesheets for shadow DOM using @vanilla-extract/css?

I have been exploring the use of @vanilla-extract/css for styling in my React app. The style method in this library exports a className from the *.css.ts file, but I need inline styling to achieve Shadow DOM encapsulation. During my research, I came acros ...

javascriptcssreactjsstitchesvanilla-extract

Refreshing the Dropdown Menu with Jquery

Looking for a way to create a reusable dropdown menu using css/jquery? Check out this codepen: https://codepen.io/anon/pen/NxXXPg Is there a method to reset the 'active' status when clicking on a blank space or another html element? Here's ...

javascriptjqueryhtmlcssdropdown

Is your CSS font italic shorthand not functioning properly?

I attempted to add italic styling to text using the font shorthand property. This is what I currently have: font: 36px italic normal Georgia; However, the italic styling is not being applied. When I specifically set font-style: italic;, it does work. ...

css

JQuery is throwing an unhandled reference error

I'm currently working on a jQuery script that looks like this: <script type="text/javascript"> $(document).ready(function () { var $containerHeight = $('.container').height(); if ($containerHeight < 760) { ...

jqueryhtmlcss

Issue with displaying footer properly

After installing a modified version of the Gridly Theme on my test site wordpress.jssim.com, I noticed that the footer generated on the actual site was not displaying correctly. Despite both theme files being identical, the footer seemed to ignore the spec ...

csswordpresscustomizationfooter

What is the best way to design a webpage that adapts to different screen heights instead of widths?

I'm in the process of designing a basic webpage for a game that will be embedded using an iframe. The game and text should always adjust to fit the height of your screen, so when the window is small, only the game is displayed. The game will be e ...

javascriptcssiframeresponsive-designmedia-queries

Adjust the orientation of the mat-slide-toggle

Is there a way to change the direction of a mat-slide-toggle from right-to-left to left-to-right without involving the text or label position? I want the switch itself to be on the right when off and on the left when on. I have considered inverting the va ...

cssangularangular-material

Is there a way to conceal the scrollbar while still permitting scrolling?

I'm interested in creating a custom scrollbar, but in order to do so I need to hide the default scrollbar while still allowing scrolling functionality. I've attempted: overflow-y:hidden; but this method hides the scrollbar and prevents scrolli ...

jqueryhtmlcss

Using jQuery to create a div that animates when scrolling

Recently, I came across this interesting code snippet: $(document).ready(function(){ $(window).scroll(function(){ if($("#1").offset().top < $(window).scrollTop()); $("#1").animate({"color":"#efbe5c","font-size":"52pt", "top":"0", "position":"fix ...

jquerycss

Arrange the next and previous buttons on the top right corner of the Bootstrap Carousel, ensuring they are situated closely together

I am currently utilizing the Bootstrap 4 carousel. My goal is to adjust the position of the next and previous buttons to be in the top right corner, close to each other. I have been able to achieve this, but I suspect that there may be an error in my CSS c ...

htmlcsstwitter-bootstrapbootstrap-4