css-grid 相关问题

我想要一个看起来像这样的网格图片库（抱歉图片不好）css 网格图片库，我使用网格模板区域来实现这一点。这是我的代码 HTML 我想要一个看起来像这样的网格图片库（抱歉图像不好），我使用grid-template-areas来实现它。这是我的代码 HTML <main class="main"> <div id="CannelliniBean"> <img src="images/1.png" alt="" class="dishImg" /> </div> <div id="Cauliflower"> <img src="images/2.png" alt="" class="dishImg" /> </div> <div id="BerryBanana"> <img src="images/3.png" alt="" class="dishImg" /> </div> <div id="RedLentilSoup"> <img src="images/4.png" alt="" class="dishImg" /> </div> <div id="Asparagus"> <img src="images/5.png" alt="" class="dishImg" /> </div> <div id="GarlickyKale"> <img src="images/6.png" alt="" class="dishImg" /> </div> <div id="SlowCooker"> <img src="images/7.png" alt="" class="dishImg" /> </div> <div id="Jambalaya"> <img src="images/8.png" alt="" class="dishImg" /> </div> <div id="ChickenFajita"> <img src="images/9.png" alt="" class="dishImg" /> </div> <div id="Hummus"> <img src="images/10.png" alt="" class="dishImg" /> </div> </main> CSS .main { padding: 7% 15%; display: grid; grid-template-areas: "CannelliniBean Cauliflower BerryBanana" "RedLentilSoup Cauliflower Asparagus" "GarlickyKale SlowCooker ChickenFajita" ". Jambalaya Hummus ."; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); } #CannelliniBean { grid-area: CannelliniBean; } #Cauliflower { grid-area: Cauliflower; } #BerryBanana { grid-area: BerryBanana; } #RedLentilSoup { grid-area: RedLentilSoup; } #Asparagus { grid-area: Asparagus; } #GarlickyKale { grid-area: GarlickyKale; } #SlowCooker { grid-area: SlowCooker; } #Jambalaya { grid-area: Jambalaya; } #ChickenFajita { grid-area: ChickenFajita; } #Hummus { grid-area: Hummus; } 然而，图像最终出现在完全相同的位置！！，在某种程度上，只显示了一张图像，而它后面的所有其他图像都在相同的确切位置，这里发生了什么？试试这个。调一下顺序就好了。查看 grid-column 和 grid-row 属性，您可以使用它们明确告诉 css 如何在网格中定位您的项目。此外，创建一个包含 6 列的网格允许您将最后 2 个项目放在中间。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .main { padding: 7% 15%; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); } #CannelliniBean { height: 50px; background-color: red; grid-column: 1 / 3; grid-row: 1; } #Cauliflower { height: 100px; background-color: green; grid-column: 3 / 5; grid-row: 1 / span 2; } #BerryBanana { height: 50px; background-color: blue; grid-column: 5 / 7; grid-row: 1; } #RedLentilSoup { height: 50px; background-color: orange; grid-column: 1 / 3; grid-row: 2; } #Asparagus { height: 50px; background-color: orangered; grid-column: 5 / 7; grid-row: 3; } #GarlickyKale { height: 50px; background-color: magenta; grid-column: 5 / 7; grid-row: 2; } #SlowCooker { height: 50px; background-color: green; grid-column: 1 / 3; grid-row: 3; } #Jambalaya { height: 50px; background-color: yellow; grid-column: 3 / 5; grid-row: 3; } #ChickenFajita { height: 50px; background-color: rgb(212, 26, 199); grid-column: 2 / 4; grid-row: 4; } #Hummus { height: 50px; background-color: orange; grid-column: 4 / 6; grid-row: 4; } </style> </head> <body> <main class="main"> <div id="CannelliniBean"> <img src="images/1.png" alt="" class="dishImg" /> </div> <div id="Cauliflower"> <img src="images/2.png" alt="" class="dishImg" /> </div> <div id="BerryBanana"> <img src="images/3.png" alt="" class="dishImg" /> </div> <div id="RedLentilSoup"> <img src="images/4.png" alt="" class="dishImg" /> </div> <div id="Asparagus"> <img src="images/5.png" alt="" class="dishImg" /> </div> <div id="GarlickyKale"> <img src="images/6.png" alt="" class="dishImg" /> </div> <div id="SlowCooker"> <img src="images/7.png" alt="" class="dishImg" /> </div> <div id="Jambalaya"> <img src="images/8.png" alt="" class="dishImg" /> </div> <div id="ChickenFajita"> <img src="images/9.png" alt="" class="dishImg" /> </div> <div id="Hummus"> <img src="images/10.png" alt="" class="dishImg" /> </div> </main> </body> </html>

html css css-grid

回答 1 投票 0

尝试固定高度时图像比预期宽的网格列

我最近问了一个关于将任意宽度应用于内部有 svg 图像的网格列的问题。你可以在这里找到。在提出问题的同时解决了另一个问题......

html css svg css-grid

回答 0 投票 0

CSS 网格列比内容宽

为什么当我将 svg 图像放置在带有 auto 的网格列中时，网格列的宽度似乎是任意的。我怎样才能让网格列适合图像允许 div 填充...

css svg css-grid

回答 2 投票 0

整行 CSS GRID 的水平边框

我需要使用网格布局，但还需要一条水平线分隔每一行。我唯一能找到的是为每个单元格应用边框，但这只有在有足够的 ce...

html css css-tables css-grid

回答 4 投票 0

网格中的 SVG 大小问题

我正在尝试使用网格构建一个包含三个元素的简单页面。我有两列和两行，我可以让一切都相对合适但并不完美。本来我有一个...

html css svg css-grid

回答 0 投票 0

如何创建 css 网格

我想使用 css（flexbox 或 gird）创建一个网格，但我不确定如何达到预期的效果。我希望我的网格是灵活的，所以我可以决定最终的外观，这就是为什么我...

html css flexbox css-grid

回答 1 投票 0

CSS 网格 - 具有独立可滚动区域的两列布局

我想实现一个布局，它有两列适合屏幕的高度。左列有两行，每一行占可见可用高度的 50%（没有固定高度，它显示...

css css-grid

回答 0 投票 0

在弹性盒子上使用网格的优缺点

我已经做了大约 4 年的 Web 开发人员，我一直非常倾向于使用 flex box 而不是 grid。我确定我拥有的原因是因为这是我最初学到的东西并且它是......

css sass flexbox css-grid flexboxgrid

回答 1 投票 0

如何从列到行重新排序网格组件？

我有一个包含一堆动态元素的列表。我想改变他们自己订购的方式。这是我所拥有的： ul { 显示：网格；网格模板列：1fr 1fr； } ... 我有一个包含一堆动态元素的列表。我想改变他们自己订购的方式。这是我所拥有的： ul { display: grid; grid-template-columns: 1fr 1fr; } <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> <li>H</li> <li>I</li> <li>J</li> </ul> 这是我的预期结果：我可以通过以下方式实现： ul { grid-auto-flow: column; grid-template-rows: repeat(5, 1fr); } 但是注意这里的5很麻烦，因为这个幻数是li数的一半。有什么办法让它动态工作吗？让它与任意数量的 li? 一起工作我也尝试在order上玩li但没有成功。有的东西： li:nth-child(even) { order: 1; /* or -1 etc. */ } 我正在寻找一个CSS解决方案。我不想依赖JS或改变HTML. column-count应该做的伎俩： ul { column-count: 2; } 试试看： ul { column-count: 2; } <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> <li>H</li> <li>I</li> <li>J</li> </ul>

html css css-grid

回答 1 投票 0

css-grid 相关问题

最新问题