CSS 中的网格和 Flex 布局

百变鹏仔 3个月前 (09-19) #CSS

文章标签网格

介绍

弹性盒：

css 网格：

网格布局详细

grid-template-columns: repeat(3, 1fr);grid-template-row: repeat(3, auto);grid-column: 1/3grid-row: 1/4

行覆盖

repeat(3, minmax(200px 1fr))

自动调整和自动填充

立即学习“前端免费学习笔记（深入）”；

css 网格中的自动填充和自动调整关键字控制当网格项不占用网格容器中的额外空间时网格的行为方式。

自动填充

.container {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));}

在此示例中，网格将创建容器中能够容纳的尽可能多的 100 像素列。 如果还有剩余空间，它将在各列之间平均分配。

自动调整：

.container {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));}

在此示例中，网格将创建容器中能够容纳的尽可能多的 100 像素列。 如果还有剩余空间，它将在各列之间平均分配，并且任何空列都将被折叠。

子网格

.container {  display: grid;  grid-template-columns: 1fr 1fr 1fr;}.item {  display: grid;  grid-template-columns: subgrid;}

注意：-

容器查询

集装箱尺寸查询

规则：-

<article class="card"><h2>That's No Moon. It's a Space Station.</h2>    <p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>    <p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>  </article><!-- we can't query cards in container query so only work with descendants--><!-- Workaround solution would be check below--><div class="card"><article><h2>That's No Moon. It's a Space Station.</h2>    <p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>    <p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>  </article></div>.card {  container-name: card;  container-type: inline-size;}@container card (min-width: 200px) {  article {    background-color: red;  }}@container card (min-width: 250px) {  article {    ...  }}

文章推荐

CSS 中的网格和 Flex 布局

介绍

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写