GRID. Как занимать элементу доступную ширину?

Question

Всем привет. В одном ряду могут находиться максимум три столбца, а потом при добавление нового пункта списка идёт перенос на новую строку и при этом элемент должен будет занять всю доступную ширину строки, а если элементов новых два , то они делят ширину между собой. Типо как flex: 1 0 315px задавать элементам.

* {
  box-sizing: border-box;
}

.content {
  display: grid;
  width: 1024px;
  grid-template-columns: 315px 1fr;
  gap: 20px;
}

.content__list {
  grid-row: 2;
  grid-column: 1 / -1;
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(315px, 1fr));
}

<div class="content">
  <h2 class="content__title">TITLE</h2>
  <ul class="content__list">
    <li class="content__list-item">
      <h3 class="content__list-title">
        Lorem
      </h3>
      <p class="content__list-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.
      </p>
    </li>
     <li class="content__list-item">
      <h3 class="content__list-title">
        Lorem
      </h3>
      <p class="content__list-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.
      </p>
    </li>
     <li class="content__list-item">
      <h3 class="content__list-title">
        Lorem
      </h3>
      <p class="content__list-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.
      </p>
    </li>
    <li class="content__list-item">
      <h3 class="content__list-title">
        Lorem
      </h3>
      <p class="content__list-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.
      </p>
    </li>
  </ul>
</div>

Answer 1

Например так

function y(){
let x = document.getElementById("x");
x.appendChild(document.createElement('hr'));
}

#x{
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6шт - для span'а 2ух висящих элементов, размер любой */
  grid-auto-rows: 1fr;
}

#x > *{
  display: list-item;
  list-style: decimal inside;
  height: 100%;
  width: 100%;
  grid-column: span 2;
}

#x > :last-child:nth-child(3n-2){ /* проверяем является ли последний,
при разбивке по 3 - первым в этой эм... "разбивке" */
  background: skyblue;
  grid-column: span 6; /* рястягиваем 1 висящий на всю строку */
}

#x > :last-child:nth-child(3n-1), /* является ли он 2ым */
#x > :nth-last-child(2):nth-child(3n-2) /* является ли 2ой с конца 1ым в разбивке) */
{
  background: pink;
  grid-column: span 3; /* 2 висящих пополам */
}

<input type='button' onclick='y()' value='+ добавить'>
<div id='x'>
  <hr><hr>
</div>

p.s. растягивание 2ух висящих пополам, еще можно реализовать на основе :hasа но там поддержка браузерами пока так себе.

БЛОГ НА HUSL

GRID. Как занимать элементу доступную ширину?

Ответы (1 шт):