CODEWITHSUNDEEP
htmlcsscss-grid
AnApprentice
AnApprentice

Reputation: 110960

Given a 2x2 grid, how can you make all the items the same width?

Given a CSS grid, where I would like there two be two rows and two columns (see code snippet).

How can I keep all the items at the same width without having to specifically set the width?

Is there a css-grid property that keeps all the grid items widths the same?

.container {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.item {
  min-width: 140px;
  height: 96px;
  padding: 8px;
  font-weight: bold;
  font-size: 17px;
  line-height: 24px;
  border: 1px solid #589BFF;
  border-radius: 12px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">ConstantineConstantine PattersonPatterson</div>
</div>

Upvotes: 2

Views: 2040

Answers (1)

Temani Afif
Temani Afif

Reputation: 272806

use 1fr instead of auto.

The new fr unit represents a fraction of the available space in the grid container ref

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.item {
  min-width: 140px;
  height: 96px;
  padding: 8px;
  font-weight: bold;
  font-size: 17px;
  line-height: 24px;
  border: 1px solid #589BFF;
  border-radius: 12px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

body {
 margin:0;
}
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">ConstantineConstantine PattersonPatterson</div>
</div>

Upvotes: 3

Related Questions