大家好。一行中最多可以有三列,然后在添加新列表项时,它会移动到新行,在这种情况下,该元素将必须占据该行的整个可用宽度,并且如果有两个新元素,然后它们将宽度分开。有点像为元素设置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>
例如像这样
ps拉伸2挂在a的基础上仍然可以实现
:has
,但是浏览器支持还是马马虎虎。