主页 / 问题 / 1598634
Accepted
Teoom07
Asked:2024-11-02 23:49:57 +0000 UTC2024-11-02 23:49:57 +0000 UTC

网格。一个元素如何占据可用宽度？

  • 772

大家好。一行中最多可以有三列，然后在添加新列表项时，它会移动到新行，在这种情况下，该元素将必须占据该行的整个可用宽度，并且如果有两个新元素，然后它们将宽度分开。有点像为元素设置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>

html

1 个回答

  1. Best Answer

    例如像这样

    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>

    ps拉伸2挂在a的基础上仍然可以实现:has，但是浏览器支持还是马马虎虎。

    • 3

相关问题