我经常使用CSS display: grid
创建一个响应式3列网格。我在网格中的HTML标记有3个div
项,因此网格会创建3列
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
当您调整窗口大小时,它会按预期折叠为1列:
https://codepen.io/smlombardi/pen/oqMjrd?editors=1100
.hero-modules {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.hero-modules .hero-item {
border: 1px solid #000;
text-align: center;
}
.hero-modules .hero-item h3 {
font-size: 22px;
text-align: center;
}

<div class="hero-modules">
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
</div>
&#13;
现在我需要在Flexbox中使用此网格,使封闭框居中浮动在链接背景上:
正如您所看到的,网格折叠(仅添加虚线边框以显示flex子项的范围)。
https://codepen.io/smlombardi/pen/PRBPWB?editors=1100
.hero {
background-color: pink;
display: flex;
min-height: 600px;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid #000;
}
.box {
border: 1px dotted #000;
text-align: center;
}
.button-unit {
text-align: center;
margin-top: 20px;
}
.hero-modules {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.hero-modules .hero-item {
border: 1px solid #000;
text-align: center;
}
.hero-modules .hero-item h3 {
font-size: 22px;
text-align: center;
}
&#13;
<div class="hero">
<div class="box">
<div>
<h1 class="hero-heading">Check out these new features</h1>
</div>
<div class="hero-modules">
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
</div>
<div class="button-unit">
<button class="btn btn-secondary mb-3">Got It</button>
<p>
<a class="remind-me-later" href="">Remind me later</a>
</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum molestias earum beatae, minima provident sunt a et? Voluptatibus sequi ipsum ad asperiores soluta odio, nam nobis quas non totam ut officiis itaque eveniet, maiores saepe id cum consequuntur.
Molestias suscipit quia laudantium laborum nemo ab officia, nihil esse mollitia sunt!
</div>
</div>
</div>
&#13;
为什么会这样?是否有一些我不想让网格正常运行的东西?
答案 0 :(得分:5)
简单答案:
网格容器的自动宽度基本上与网格容器不同。
在第一个示例中,网格容器宽度仅受文档宽度和任何默认边距的约束。
在第二个示例中,网格容器宽度是祖先弹性项目的宽度,默认收缩包裹行为取决于其内容的宽度,文本&#34; Lorem ipsum dolor sit amet,consectetur adipisicing elit。 Dicta est ipsa recusandae。&#34; (更直接地说,网格容器的宽度是前面引用的句子的宽度。)
扩展答案:
网格容器(.hero-modules
)具有width: auto
(默认值)。每https://drafts.csswg.org/css-grid/#grid-container:
作为块格式化上下文中的块级框,其大小类似于建立格式化上下文的块框,其中自动内联大小的计算方式与未替换的块框相同。
术语&#34;自动内联大小&#34;只是在这种情况下说width: auto
的另一种方式。 (&#34;自动内联大小&#34;垂直文本为height: auto
。)
&#34;一个块框,用于建立格式化上下文&#34;与display: flow-root
的框相同。将display: grid
更改为display: flow-root
将演示width: auto
为什么宽度用于计算网格容器的宽度。
现在我们知道网格容器大小的来源。
弹性项目的大小来自flex-grow: 0
和flex-shrink: 1
(默认值),这会使其宽度缩小而不会增长。弹性项宽度的基础是flex-basis: auto
(默认值),可解析为flex-basis: content
。内容是文本&#34; Lorem ipsum dolor sit amet,consectetur adipisicing elit。 Dicta est ipsa recusandae。&#34;
现在我们知道为什么flex项目不会扩展以及它的宽度是基于什么。
修复此布局:
此flex布局不应基于列;它应该是基于行的。列位于唯一的柔性项目内,但不是弹性项目本身,并且在x轴而不是y轴上需要尺寸灵活性。
因此,flex-direction: column
需要成为flex-direction: row
。
flex布局需要增长(在x轴上)以适应可用空间,因此需要在flex项目(flex-grow: 1
)上指定.box
。
最后,grid-template-columns
值应使用auto-fit
,而不是auto-fill
,如果需要水平居中。网格项可以居中,justify-content: center
应用于网格容器元素。
(使用auto-fill
时,将放置不可见的占位符网格项以填充布局,这将导致三个当前网格项对齐到左侧,一堆不可见的占位符项填写剩余的空白右边的空格。使用auto-fit
,这些占位符网格项被简单地丢弃,并且该空间被释放以进行水平对齐。)
.hero {
background-color: pink;
display: flex;
min-height: 600px;
flex-direction: row;
align-items: center;
justify-content: center;
border: 1px solid #000;
}
.box {
border: 1px dotted #000;
flex-grow: 1;
text-align: center;
}
.button-unit {
text-align: center;
margin-top: 20px;
}
.hero-modules {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
justify-content: center;
}
.hero-modules .hero-item {
border: 1px solid #000;
text-align: center;
}
.hero-modules .hero-item h3 {
font-size: 22px;
text-align: center;
}
&#13;
<div class="hero">
<div class="box">
<div>
<h1 class="hero-heading">Check out these new features</h1>
</div>
<div class="hero-modules">
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
</div>
<div class="button-unit">
<button class="btn btn-secondary mb-3">Got It</button>
<p>
<a class="remind-me-later" href="">Remind me later</a>
</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum molestias earum beatae, minima provident sunt a et? Voluptatibus sequi ipsum ad asperiores soluta odio, nam nobis quas non totam ut officiis itaque eveniet, maiores saepe id cum consequuntur.
Molestias suscipit quia laudantium laborum nemo ab officia, nihil esse mollitia sunt!
</div>
</div>
</div>
&#13;
答案 1 :(得分:1)
Add **display:flex** property to your main container.
.Main {
display:flex;
}
div {
flex: 1;
}
然后所有div将充当网格以获取更多信息,请参阅下面的链接。 https://www.w3schools.com/css/css3_flexbox.asp
答案 2 :(得分:0)
您可以使用display: flex
属性执行此操作。下面是它的代码。
.hero-modules {
display: flex;
}
.hero-modules .hero-item {
flex: 1;
margin: 10px;
border: 1px solid #000;
text-align: center;
}
.hero-modules .hero-item h3 {
font-size: 22px;
text-align: center;
}
<div class="hero-modules">
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
</div>