CODEWITHSUNDEEP
csscss-grid
Kévin_Bransard
Kévin_Bransard

Reputation: 686

Css grid with fixed width elements, issue with gutters / center of elements

I'm currently working on a css grid layout with card components which have fixed height and width. On a large screen, I have no issues, the gutter has the right size. On small width, I would like the gutter to be always the same as in the larger screen to avoid large gaps between the card components.

Here's a code for the example, where we can switch between the different grid size :

document.querySelectorAll("[data-width]").forEach((item) => {
  item.addEventListener("click", (event) => {
    document.querySelector(".cards-grid-layout").style.width =
      item.dataset.width;
  });
});
.cards-grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
  grid-gap: 56px 40px;
  margin: auto;
  max-width: 1144px;
  justify-items: center;
}

.card {
  width: 256px;
  height: 360px;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  position: relative;
  margin-bottom: 0;
  border: 1px solid #ddd;
}

.card-image {
  height: 160px;
}

.card-image IMG {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.toolbar {
  max-width: 1144px;
  margin: 16px auto 36px auto;
}
.toolbar A {
  color: blue;
  border: 1px solid #DDD;
  padding: 8px;
  cursor: pointer;
}
.toolbar A:hover {
  background-color: #EEE;
}
<div class="toolbar">
  <a class="" data-width="1144px">Full width</a>
  <a class="" data-width="1080px">3 cards per line</a>
  <a class="" data-width="800px">2 cards per line</a>
  <a class="" data-width="480px">1 card per line</a>
</div>

<div class="cards-grid-layout">
  <div class="card">
    <div class="card-image">
      <img src="https://picsum.photos/265/160" />
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="https://picsum.photos/265/160" />
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="https://picsum.photos/265/160" />
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="https://picsum.photos/265/160" />
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="https://picsum.photos/265/160" />
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="https://picsum.photos/265/160" />
    </div>
  </div>  
  
</div>

My css grid has the following code :

.cards-grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
  grid-gap: 56px 40px;
  margin: auto;
  max-width: 1144px;
  justify-items: center;
}

And my fixed width / height cards :

.card {
  width: 256px;
  height: 360px;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  position: relative;
  margin-bottom: 0;
  border: 1px solid #ddd;
}

The large screen case where horizontal gutter is 56px wide :

The large screen case where horizontal gutter is 56px wide

The smaller screen case where horizontal gutter is still 56px, but there's empty zones on the left / right of each card :

enter image description here

Is there anyway to solve this issue ?

Upvotes: 3

Views: 549

Answers (1)

Temani Afif
Temani Afif

Reputation: 273990

Simply use grid-template-columns: repeat(auto-fit, 256px) to always have the same columnns width and center them using justify-content:center

document.querySelectorAll("[data-width]").forEach((item) => {
  item.addEventListener("click", (event) => {
    document.querySelector(".cards-grid-layout").style.width =
      item.dataset.width;
  });
});
.cards-grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, 256px);
  grid-gap: 56px 40px;
  margin: auto;
  max-width: 1144px;
  justify-items: center;
  justify-content: center;
}

.card {
  width: 256px;
  height: 360px;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  position: relative;
  margin-bottom: 0;
  border: 1px solid #ddd;
}

.card-image {
  height: 160px;
}

.card-image IMG {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.toolbar {
  max-width: 1144px;
  margin: 16px auto 36px auto;
}
.toolbar A {
  color: blue;
  border: 1px solid #DDD;
  padding: 8px;
  cursor: pointer;
}
.toolbar A:hover {
  background-color: #EEE;
}
<div class="toolbar">
  <a class="" data-width="1144px">Full width</a>
  <a class="" data-width="1080px">3 cards per line</a>
  <a class="" data-width="800px">2 cards per line</a>
  <a class="" data-width="480px">1 card per line</a>
</div>

<div class="cards-grid-layout">
  <div class="card">
    <div class="card-image">
      <img src="https://picsum.photos/265/160" />
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="https://picsum.photos/265/160" />
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="https://picsum.photos/265/160" />
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="https://picsum.photos/265/160" />
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="https://picsum.photos/265/160" />
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="https://picsum.photos/265/160" />
    </div>
  </div>  
  
</div>

Upvotes: 3

Related Questions