css Question posted in
Some basic documentation can be found here.

Is there a method to increase box height in CSS grid without affecting other boxes in the row?

I’m currently working on designing a layout similar to the one attached in the screenshot To achieve this, I’ve opted for CSS Grid for its ease of use and responsiveness.

However, I’ve encountered a challenge. I want each box to dynamically adjust its height based on its content, without affecting the heights of other boxes in the same row. Currently, when one box increases in height due to its content, it affects the heights of all other boxes in the row.

Is there a way to achieve the desired behavior without compromising the responsiveness of the layout? If not with CSS Grid, would you recommend a different approach that better suits my requirements?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: blueviolet;
  padding: 5%;
}

.parent-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 2rem;
}

.box {
  background-color: aqua;
  min-height: 300px;
}
<div class="parent-container">
  <div class="box">**Lorem ipsum 200**
  </div>
  <div class="box">Item 2</div>
  <div class="box">Item 3</div>
  <div class="box">Item 4</div>
  <div class="box">Item 5</div>
  <div class="box">Item 6</div>
  <div class="box">Item 7</div>
  <div class="box">Item 8</div>
  <div class="box">Item 9</div>
  <div class="box">Item 10</div>
  <div class="box">Item 11</div>
  <div class="box">Item 12</div>
  <div class="box">Item 13</div>
  <div class="box">Item 14</div>
  <div class="box">Item 15</div>
  <div class="box">Item 16</div>
  <div class="box">Item 17</div>
  <div class="box">Item 18</div>
  <div class="box">Item 19</div>
  <div class="box">Item 20</div>
</div>
Tags:

2

Answers


  1. 0

    You can easily do this. You should use align-items on the .parent-container element, then the box height will increase dynamically based on your content’s height.

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: blueviolet;
    padding: 5%;
}

.parent-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 2rem;
    align-items: flex-start;
}

.box {
    background-color: aqua;
    min-height: 200px; 
}
    <div class="parent-container">
        <div class="box">**Lorem ipsum 200** it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
        </div>
        <div class="box">Item 2</div>
        <div class="box">Item 3</div>
        <div class="box">Item 4</div>
        <div class="box">Item 5</div>
        <div class="box">Item 6</div>
        <div class="box">Item 7</div>
        <div class="box">Item 8</div>
        <div class="box">Item 9</div>
        <div class="box">Item 10</div>
        <div class="box">Item 11</div>
        <div class="box">Item 12</div>
        <div class="box">Item 13</div>
        <div class="box">Item 14</div>
        <div class="box">Item 15</div>
        <div class="box">Item 16</div>
        <div class="box">Item 17</div>
        <div class="box">Item 18</div>
        <div class="box">Item 19</div>
        <div class="box">Item 20</div>
    </div>
    Login or Signup to reply.
  2. 0

    You can use any of the following according to your requirement

    1. Using Grid Row Span
      You can make a specific grid item span multiple rows, which will effectively increase its height. This can be done using the grid-row property.

    2. Using Line-based Placement
      You can place a grid item between specific row lines to control its height precisely.

    3. Using Min-Height
      You can also use min-height on a specific grid item to increase its height, provided the grid layout supports the change without breaking the overall design.

    4. Using Align-self
      In some cases, you might want to align a specific item differently within its grid area. This won’t increase the height but can change its vertical alignment.

    Each of these methods can be used depending on your specific layout requirements and the behavior you want to achieve.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search