Как растянуть секции в равных пропорциях?

Question

Задача

Я хочу растянуть, фиксируя соотношение section.
как это:

Я применил max-width: 100%; & height: auto; к <section>, но не сработало.

Наконец, я хочу сделать это:

Кстати, я использую сетку CSS.
Как мне заставить section растягиваться с той же скоростью?

код

html { font-size: 62.5%; }
body { display: block; margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; background: transparent; box-sizing: border-box; }  /* reset */
#items {
  display: grid;
  grid-gap: 3.8rem 4.6rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.item {
  text-align: center;
  width: 25.35rem;
}
.item img {
  max-width: 100%;
  height: auto;
}
.item h2 {
  font-size: 1.6rem;
  margin-top: 1.6rem;
  margin-bottom: 1.5rem;
}
.item p {
  font-size: 1.5rem;
  margin-bottom: .8rem;
}
.item h2, .item p, .item span {
  text-align: left;
}
.item span {
  float: left;
  display: inline-block;
  font-size: 1.1rem;
  border: .1rem solid black;
  border-radius: .3rem;
  margin-right: .6rem;
  margin-bottom: .5rem;
  padding: .3rem;
}

<div id="items">
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210318.png">
      <h2>Title</h2>
      <p>Easy explanation</p>
      <span>tag</span>
      <span>tags</span>
      <span>of</span>
      <span>various</span>
      <span>lengths</span>
      <span>tag</span>
      <span>tag</span>
      <span>tag</span>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210315.png" alt="b" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210313.png" alt="c" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210310.png" alt="d" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210308.png" alt="e" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210354.png" alt="f" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210352.png" alt="g" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210349.png" alt="h" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
  </div>

Answer 1

Как насчет следующего. Вы можете использовать @media queries для создания адаптивной сетки.

html { font-size: 62.5%; }
body { display: block; margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; background: transparent; box-sizing: border-box; }  /* reset */
#items {
  display: grid;
  grid-gap: 3.8rem 4.6rem;
  grid-template-columns: repeat(12, 1fr);
  padding: 3.8rem;
}
.item {
  text-align: center;
  border: 1px solid red; /* Just for demonstration */
}
.item img {
  width: 100%;
  height: auto;
}
.item h2 {
  font-size: 1.6rem;
  margin-top: 1.6rem;
  margin-bottom: 1.5rem;
}
.item p {
  font-size: 1.5rem;
  margin-bottom: .8rem;
}
.item h2, .item p, .item span {
  text-align: left;
}
.item span {
  float: left;
  display: inline-block;
  font-size: 1.1rem;
  border: .1rem solid black;
  border-radius: .3rem;
  margin-right: .6rem;
  margin-bottom: .5rem;
  padding: .3rem;
}


.item {
  grid-column: span 12;
}

@media only screen and (min-width: 1000px) {
  .item {
    grid-column: span 6;
  }
}

@media only screen and (min-width: 1600px) {
  .item {
    grid-column: span 4;
  }
}

<div id="items">
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210318.png">
      <h2>Title</h2>
      <p>Easy explanation</p>
      <span>tag</span>
      <span>tags</span>
      <span>of</span>
      <span>various</span>
      <span>lengths</span>
      <span>tag</span>
      <span>tag</span>
      <span>tag</span>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210315.png" alt="b" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210313.png" alt="c" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210310.png" alt="d" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210308.png" alt="e" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210354.png" alt="f" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210352.png" alt="g" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210349.png" alt="h" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
  </div>

Answer 2

Указание max-width было причиной всего.
Просто изменив два места, все работает как положено.

html { font-size: 62.5%; }
body { display: block; margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; background: transparent; box-sizing: border-box; }  /* reset */
#items {
  display: grid;
  grid-gap: 3.8rem 4.6rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.item {
  text-align: center;
  /* width: 25.35rem; */    /* ① delete */
}
.item img {
  width: 100%;    /* ② max-width -> width */
  height: auto;
}
.item h2 {
  font-size: 1.6rem;
  margin-top: 1.6rem;
  margin-bottom: 1.5rem;
}
.item p {
  font-size: 1.5rem;
  margin-bottom: .8rem;
}
.item h2, .item p, .item span {
  text-align: left;
}
.item span {
  float: left;
  display: inline-block;
  font-size: 1.1rem;
  border: .1rem solid black;
  border-radius: .3rem;
  margin-right: .6rem;
  margin-bottom: .5rem;
  padding: .3rem;
}

<div id="items">
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210318.png">
      <h2>Title</h2>
      <p>Easy explanation</p>
      <span>tag</span>
      <span>tags</span>
      <span>of</span>
      <span>various</span>
      <span>lengths</span>
      <span>tag</span>
      <span>tag</span>
      <span>tag</span>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210315.png" alt="b" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210313.png" alt="c" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210310.png" alt="d" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210308.png" alt="e" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210354.png" alt="f" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210352.png" alt="g" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210349.png" alt="h" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
  </div>