使用css网格将项目成对放置在两行中
使用CSS网格将项目成对放置在两行中可以通过以下步骤实现：
- 创建HTML结构：首先，在HTML中创建一个包含项目的容器元素，例如一个div元素，并为其添加一个类名或ID作为选择器。
<div class="grid-container">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目4</div>
<div class="item">项目5</div>
<div class="item">项目6</div>
</div>- 创建CSS样式：接下来，在CSS中定义网格布局，并为项目元素添加样式。
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 将容器分为两列 */
grid-gap: 10px; /* 设置项目之间的间隔 */
}
.item {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}- 设置项目位置：使用网格行和列的索引来指定项目的位置。
.item:nth-child(odd) {
grid-row: 1; /* 将奇数项目放置在第一行 */
}
.item:nth-child(even) {
grid-row: 2; /* 将偶数项目放置在第二行 */
}完整的代码示例：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.item {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
.item:nth-child(odd) {
grid-row: 1;
}
.item:nth-child(even) {
grid-row: 2;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目4</div>
<div class="item">项目5</div>
<div class="item">项目6</div>
</div>
</body>
</html>这样，项目将被成对放置在两行中，奇数项目在第一行，偶数项目在第二行。你可以根据需要调整项目的样式和布局。
相关·内容
2回答
我正在尝试以特定的顺序呈现项目，请看图片： ? 即存在无限数量的项，按列排列，每列有两个项。你有任何想法如何使用网格或flexbox或任何其他方式(可能通过组合它们)来编写代码吗？我知道我可以用表格做到这一点，但这一次我尽量避免使用它们。
浏览 14提问于2020-12-30得票数 3
回答已采纳
2回答
我有一个网格视图，显示images.In，一行网格只包含三个图像(网格列大小为3)。我在lanscape模式下使用我的应用程序，并希望默认情况下，如果网格中没有任何内容，我可以看到两行。如果网格的大小大于网格中的六个项目，则表示两行，然后开始滚动。Image 3
Image 4 Image 5
浏览 0提问于2012-12-01得票数 0
2回答
单网格行中的两行文本
、、、、
有人知道在TKinter中使用grid是否可以在一行中放置两行文本吗？
如果我将字体设置得足够小，我可以将文本分成两行吗？
浏览 1提问于2012-04-16得票数 0
回答已采纳
4回答
我想主题面板使用禅宗网格的布局。由于面板中的所有内容都出现在“content”div中，那么使用面板将内容放置在页面上的任何位置的最灵活的方法是什么？我到处都用-面板吗？-小型面板？
我不想让事情复杂化。是否有某种方式配置面板将内容放置在页面正文部分的任何div中？我想
浏览 0提问于2012-12-06得票数 4
回答已采纳
我有一个有两行的网格 <RowDefinition Height="44" /></Grid.RowDefinitions</WrapPanel>
在第一行中，我将放置一个具有水平方向的WrapPanel。WrapPanel中的
浏览 2提问于2014-10-09得票数 0
回答已采纳
1回答
我使用css柔性盒将未知数量的项目放置在行中，并在需要时将其包装到其他行。是我拥有的一个简单的例子。如果您打开代码页，您将看到项目包装成两行(可能超过两行；或者只有一行--这取决于元素的确切数量和显示的宽度)。我想在两行之间画一条水平线。</span>
<span>Fourth item</spa
浏览 1提问于2015-11-11得票数 11
回答已采纳
1回答
我已经在我的react项目中添加了react-semantic-ui。添加的是我的目标布局。现在，我应该使用什么来绘制它，Grid还是Flexbox？我应该避免使用Grid吗？或者我应该在最多的地方使用flexbox？还是应该一直使用Grid或flexbox？或者它可能是两者的组合。请给我引路。
提前感谢！
浏览 1提问于2018-11-11得票数 4
在这个项目中，我将结合使用fullPage和CSS Grid Layout。
我目前已经在第一个div上定义了一个叫做"section“的网格，但是我也想让”幻灯片“div的内容与这个网格保持一致。目前，CSS grid的自动放置只是在第一个表单元格(第1行，第1列)中放置"fp幻灯片“以及它的所有子级内容( h1，h2，p h3)。它应该使用所有可用的行&#
浏览 1提问于2017-11-16得票数 4
典型的CSS网格布局将项目从左到右放置在网格中，然后包装到下一行，类似于在一系列块元素上使用float:left。例如，：给出了一个按字母顺序排列的24项列表，我想在3列<em
浏览 0提问于2019-01-08得票数 0
1回答
我有一组通过CSS Grid布局尽可能“自动”排列的div磁贴；我的最后一个想法是，即使我不知道有多少磁贴，它们的大小和位置都是正确的。这工作得很好。 */ console.log(colCount); va
浏览 1提问于2017-07-10得票数 10
回答已采纳
2回答
我有一个用maven创建的Spring项目。下面是我的目录结构。mvc xmlns和xsi位置之前并不存在，我添加了它们，以便下面的代码行可以工作：
<mvc:resources loca
浏览 2提问于2013-06-15得票数 5
回答已采纳
1回答
";
它的工作罚款，但我想添加一些图标到第一个div (一个在左侧和其他在右侧)。为此，我创建了另外两个列，但是当将它们添加到网格模板区域时，它们会将所有项放置在右上角。你知道我在这里做错什么了吗？
浏览 1提问于2020-07-14得票数 2
回答已采纳
3回答
我使用新的css网格，如下所示： display: grid; grid-template-rows"}
所以我有两行5列，但只有3列有内容。我使用模板区域中的点来定义空白。这样做的结果是在左边和右边有一个3列的空白布局。如果我在具有背景颜色的<e
浏览 11提问于2017-08-06得票数 2
回答已采纳
1回答
我对CSS网格中的多行项有一些问题。我不确定是故意的还是奇怪的行为。但是，当网格行是自动的，它有其他的麻烦。是在body没有足够内容的情况下演示的示例。编辑：如果我们对body片使用1fr，那么内容将
浏览 6提问于2017-12-14得票数 5
2回答
我正在做一个，在那里我希望实现一个具有自动放置功能的布局，同时尽可能地将所有的子级配置得尽可能紧密。恰巧CSS有一个很棒的特性，它允许网格自动放置子元素，不幸的是，本机不支持CSS网格。我已经设法使用二进制打包算法对项目进行排序，但是可视化仍然是一个我似乎无法工作的问题。我的问题是:是否有一个用于React本机的包可以做到这一点，或者是否有一个算法来可视化一个二进制打包的项目数组，该数组可以工作在R
浏览 5提问于2022-07-16得票数 1
回答已采纳
我最近看了一个Windows Azure网页的演示，看到了一个非常漂亮的功能……在管理门户中，您可以使用一个磁贴或任何内容，并在其网页上重新排列它们。当你使用带有内容的磁贴/面板并拖动它时，背景中会出现一个可视网格，并向你展示如何将内容放置在这个网格中。(当然，网格可以定义它可以显示的位置)
他们使用了什么组件来实现这种重新排列呢？我计划使用的Metro UI C
浏览 7提问于2014-11-21得票数 0
3回答
如何固定网页的一部分？
、、、
因此，左侧本身不能滚动，但当我滚动右侧，左侧保持固定，我仍然可以看到它的内容，如果我在顶部或底部的页面。
我有办法做到这一点吗？我正在开发使用角和引导，但我也使用自定义CSS。
浏览 0提问于2019-06-27得票数 0
回答已采纳
2回答
有没有一种既好又快的方法来将显示/隐藏列按钮移动到另一个位置，而不需要为此操作实现新的功能？
我试着使用广播/观看，但这不起作用。
浏览 1提问于2014-10-28得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
