Question 233673 in Html Question posted in
Some basic documentation can be found here.

Html – Equal height for rows of CSS Grid or Flexbox with non-infinite height

Note that this answer works and explains why it works for infinite height CSS grid. In my case, the height is limited (which could be 100vh or due to flex-grow but it’s not infinite).

Let’s say I have a certain space for a grid (decided by a flex box which is the remaining space of whatever remaining of the screen). I want it to be divided into two equal rows. The top one should be an img with object-fit: scale-down that take up all 50% height and at most 100% width and the bottom row should be some random text. Problem is, when the img is bigger, it takes up additional space (see example below).

Is it possible to divide a CSS grid or flex box (or any kind of display) into two strictly equal rows?

body {
  height: 100vh;
  width: 500px;
  display: flex;
  margin: 0;
  padding: 0;
}

.grid {
  height: 100%;
  width: 100%;
  
  display: grid;
  grid-template-rows: 1fr 1fr;
  
  background-color: cornflowerblue;
  
  padding: 1rem;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

.content {
  background-color: black;
  color: white;
}
<div class="grid">
  <img src="https://placehold.co/600x400" />
  <div class="content">Another content</div>
</div>
Tags:

2

Answers


  1. 0

    In this approach, I used a flexbox container with the class .flex to split a space into two equal rows. The top row holds an image with object-fit: scale-down, while the bottom row contains text. To prevent the image from affecting the row’s height, I set flex-grow: 1 and a fixed height: 50% for the image. The text row’s height is also set to 50% with flex-grow: 1. This layout maintains equal row heights even when the image is larger.

    body {
  height: 100vh;
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}

.flex {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: cornflowerblue;
  padding: 1rem;
  box-sizing: border-box; 
}

img {
  display: block;
  height: 50%;
  object-fit: scale-down;
  flex-grow: 1;
}

.content {
  height: 50%;
  background-color: black;
  color: white;
  flex-grow: 1;
}
    <div class="flex">
  <img src="https://placehold.co/600x400" />
  <div class="content">Another content</div>
</div>
    Login or Signup to reply.
  2. 0

    If you put the img inside a div and set the img position: absolute, the setting seems to work OK.

    body {
  height: 100vh;
  width: 700px;
  display: flex;
  margin: 0;
  padding: 0;
}

.grid {
  height: 100%;
  width: 100%;
  
  display: grid;
  grid-template-rows: 1fr 1fr;
  
  background-color: cornflowerblue;
  
  padding: 1rem;
}

.grid > .img-container {
  position:relative;
  background:pink;
}

img {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

.content {
  background-color: black;
  color: white;
}
    <div class="grid">
  <div class="img-container">
    <img src="https://placehold.co/600x400" />
  </div>
  <div class="content">Another content</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search