如何使用背景颜色制作CSS网格？

作者: 啦啦啦拉肚子
发布时间: 2024-04-20 06:32:11 (14天前)
转自：

3 条回复

0#
回复此人
真不错 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> CSS <code> grid </code> 是一个很好的选择，并在支持的情况下运作良好。 </p> <P> 如果需要关注浏览器支持，您也可以使用 <code> flexbox </code> 它有更好的支持。无论哪个，您都需要供应商前缀。 </p> <P> 代码笔示例： <a href="https://codepen.io/anon/pen/GeQREE" rel="nofollow noreferrer"> https://codepen.io/anon/pen/GeQREE </A> </p> <P> <a href="https://i.stack.imgur.com/dOXeq.png" rel="nofollow noreferrer"> <img src =“https://i.stack.imgur.com/dOXeq.png”alt =“Codepen screenshot”/> </A> </p> <P> CSS更改非常简单。父/包装元素需要以下内容： </p> <pre> <code> display: flex; flex-wrap: wrap; </code> </pre> <P> 对孩子们来说最简单的改变就是宽度。就像是： </p> <pre> <code> width: 31%; margin: 1%; </code> </pre> <P> （总宽度为33％或3） </p> <P> 希望这可以帮助！ </p> <UL> <LI> 网格支持： <a href="https://caniuse.com/#feat=css-grid" rel="nofollow noreferrer"> https://caniuse.com/#feat=css-grid </A> </LI> <LI> Flex支持： <a href="https://caniuse.com/#feat=flexbox" rel="nofollow noreferrer"> https://caniuse.com/#feat=flexbox </A> </LI> </UL> </DIV>

编辑
1#
回复此人
电动少女 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以用新的方式轻松实现这一目标 <a href="https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228" rel="nofollow noreferrer"> css网格 </A> 特征。浏览器支持相当不错。您可能需要添加供应商前缀以获得最大的浏览器支持。 </p> <P> 基本上，你需要一个父div来保存/包装它的孩子（对于你的情况，这将是灰色框）。 </p> <P> 假设这是HTML： </p> <pre> <code> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </code> </pre> <P> 和使这个3（列）x2（行）网格的CSS将是： </p> <pre> <code> .parent { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr); grid-gap: 15px; } .child { background: #f7f7f7; padding: 15px; } </code> </pre> <P> 一行中的所有列都具有相同的高度并且等于最高的列。这是一个工作 <a href="https://codepen.io/khairul_anik/pen/KEXopL" rel="nofollow noreferrer"> codepen </A> 链接以查看它的实际效果。 </p> </DIV>

编辑

登录后才能参与评论