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

Html – CSS subgrid adds uneven space between element

I am using subgrid to create card with even spacing. For some reason card adds lot of space between elements and space is different in FF and Chrome. Below is the code based on this tutorial.

.wrapper{
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
  gap:1rem;
  margin-top:0rem;
  max-height:400px;
}
.wrapper p h2 {  margin:0px;}
.wrapper img {
  max-width:100%;
  display:block;
}
.box{
   border:1px solid #ccc;
  border-radius: 6px;
  padding:1rem;
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 3;
}
<div class="wrapper">
  <div class="box">
    <img src="https://picsum.photos/600/400?random=1" />
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <img src="https://picsum.photos/600/400?random=4" />
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <img src="https://picsum.photos/600/400?random=3" />
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <img src="https://picsum.photos/600/400?random=2" />
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
</div>
Tags:

2

Answers


  1. 0

    It is because of how you limit the image size. For some reason in Firefox the height of the track is calculated before the images are shrunk by max-width:100%. (Though I can’t find the spec for which is the correct behavior.)

    To deal with problems caused by replaced elements within a grid or flex container, using a <div> wrapper usually does the trick, which is the case here.

    .wrapper {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1rem;
  margin-top: 0rem;
  max-height: 400px;
}

.wrapper p h2 {
  margin: 0px;
}

.box > div {
  max-width: 100%;
}

img {
  max-width: 100%;
  display: block;
}

.box {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}
    <div class="wrapper">
  <div class="box">
    <div>
      <img src="https://picsum.photos/600/400?random=1" />
    </div>
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <div>
      <img src="https://picsum.photos/600/400?random=4" />
    </div>
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <div>
      <img src="https://picsum.photos/600/400?random=3" />
    </div>
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <div>
      <img src="https://picsum.photos/600/400?random=2" />
    </div>
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    One possible reason for the uneven spacing could be due to the way you are using the grid-template-rows: subgrid; property in the .box class. The subgrid value is not fully supported by all browsers yet, which could lead to inconsistent behavior.

    To achieve a consistent grid layout with even spacing between the cards, you can consider using a different approach without relying on subgrid.

    Here’s an alternative solution using a simpler grid setup:

    .wrapper{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1rem;
}

.box{
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
}

.wrapper img {
  max-width: 100%;
  display: block;
}

.wrapper h2, .wrapper p {
  margin: 0;
}

    With this updated CSS, you have removed the grid-template-rows: subgrid; property from the .box class and simplified the styling.

    By using grid-template-columns and gap properties in the .wrapper class, you can achieve a consistent grid layout with even spacing between the cards.

    Make sure to test this updated code in both Firefox and Chrome to ensure consistent spacing between the cards across different browsers.

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

Back To Top
Search