开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用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>

这样，项目将被成对放置在两行中，奇数项目在第一行，偶数项目在第二行。你可以根据需要调整项目的样式和布局。

相关搜索:Python将网格项目放置在notebook上如何使用CSS网格创建3x3网格，但将项目放置在特定的网格列中使项目在css网格中居中在CSS网格中充当网格项目的伪元素将项目放置到具有网格布局的面板中如何使用material ui在复杂网格中居中放置容器/项目使用Flexbox将8个按钮放置在两行上如何使用Vue.js在CSS网格中显示项目如何使用grid -template-area在CSS网格中放置div？CSS -将图像集中放置在容器中发出以将项目放置在导航栏中将剩余项目放置在新行中使用css网格在div中定位div 在HTML和css中，如何将img放置在div之上使用html/css在shiny中的绘图上放置标题 CSS将href标题放置在UL列表中的图像下用于在均匀分布的网格中布局项目列表的CSS 使用CSS将图标放置在段落文本之后，而不考虑行长在material UI中，如何在网格项目中间放置一个按钮？如何使用css网格将第一行中的1列居中，并将其他3列放置在第二行中？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

iOS开发中在swift项目中使用HandyJSON将字典转成模型

swift中我目前使用HandyJSON将字典转成模型。看代码： ? HandyJSON 代码比较简单，大家可以亲测。...（本人使用的时候是swift4）本篇文章到这里就结束了，愿大家加班不多工资多，男同胞都有女朋友，女同胞都有男朋友

2.4K1 0

5分钟学习css网格

序言您将在本文中,简单了解到如何使用网格布局,一种布局有多种实现方式,曾今对于使用老的弹性盒模型(display:box)以及新的flex(display:flex)布局用过的话,对于css Grid...直到你理解了基础知识之后，我才会把你不应该关心的一切都抛在脑后你的第一个网格布局 CSS Grid的两个核心成分是包装（父）和物品（子）。...放置项目接下来你需要学习的是如何在网格上放置物品.这是你获得超级能力的地方,因为它使得创建布局变得非常简单让我们来创建一个3x3网格,使用与之前相同的标记 .wrapper{ display...注意:我们只在页面上看到一个3x2的网格,而我们将其定义为一个3x3的网格。那是因为我们只有六个项目来填补网格。...以下是在屏幕上显示的内容 ? 当你们为什么只有3列的时候，我们有4条专栏？看看这个图片，我画了黑色的列线 ? 请注意，我们现在正在使用网格中的所有行。

1.7K2 0

深挖 Threads App 帖子布局，我进一步加深了对CSS网格布局的理解

使用CSS Grid进行帖子布局在生产应用程序中，CSS Grid的最显着的用例之一就是Threads。CSS Grid用于构建帖子布局。...没有主容器；使用grid-column和grid-row属性手动放置帖子中的每个项目用户头像 .post-avatar { padding-top: 4px; grid-row: 1 / span...2; grid-column: 1; } 头像位于第一列中，跨越了前两行。...这是带有和不带有padding-top处理的头像的前后外观：应用padding-top的另一个原因可能是将头像下移并使其更接近线条。对网格行使用奇数值奇数值作为网格行的高度是出于什么考虑？...然而，这个例子表明，使用手动调整的值是可以接受的。在某些情况下，从严格的准则中偏离是可以接受的。使用固定大小行的限制由于前两行的固定宽度，无法向它们添加填充。

1702 0

每天10个前端小知识【Day 17】

个单元格分成a、b、c三个区域如果某些区域不需要利用，则使用"点"（.）表示 grid-auto-flow 属性划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。...这时，浏览器会自动生成多余的网格，以便放置项目。...stretch：拉伸，占满单元格的整个宽度（默认值）应用场景文章开头就讲到，Grid是一个强大的布局，如一些常见的 CSS 布局，如居中，两列布局，三列布局等等是很容易实现的，在以前的文章中，也有使用...Grid布局完成对应的功能。...而如果外部引用css代码，在解析html结构过程中遇到外部css文件，才会开始下载css代码，再渲染所以，CSS内联使用使渲染时间提前。

1451 1

CSS Grid 那些鲜为人知的内幕

❝Grid最令人神往的地方就是它的网格结构，即行和列，具体表现就是这些页面布局只需在 CSS 中定义即可。...，Grid 允许我们完全在 CSS 中管理布局。...当我们想让特定区域跨越多行或多列时，我们可以在我们的模板中「重复该区域的名称」。在这个例子中，sidebar区域跨越了两行，所以我们在第一列的两个单元格中都写了 sidebar。...：在每个网格项之间放置相等量的空间，两端的空间为一半大小 space-between：在每个网格项之间放置相等量的空间，两端没有空间 space-evenly：在每个网格项之间放置相等量的空间，包括两端...将元素放置在左上角将元素放置在右下角后记「分享是一种态度」。「全文完，既然看到这里了，如果觉得不错，随手点个赞和“在看”吧。」

1571 0

css grid 布局那些事儿

CSS Grid 独一无二的功能提供使用基于行的定位将项目放置在网格上的能力。这使得创建非常复杂的布局成为可能，而无需使用传统的浮动或绝对定位。提供跨越列和行的能力。...换句话说，您可以拥有跨越多列或多行的项目。提供通过使用行号和名称或通过定位网格的特定区域将项目放置在特定位置的能力。还包括一个算法来控制未明确放置在网格上的项目的放置。...提供控制项目放置在网格区域内后如何对齐以及网格整体对齐方式的能力。提供使用像素创建使用固定轨道大小的网格的能力 - 将网格设置为适合您所需布局的指定像素。...使用列和行网格允许您指定布局中的列数和行数，然后将元素放置在这些列和行中。 grid-template-columns 您可以使用和 grid-template-rows 属性控制列和行的宽度。...50% 33.33% 25%; } 在布局中指定列数和行数后，您可以使用 grid-column 和 grid-row 属性将元素放置在这些列和行中。

2.1K3 0

最强大的 CSS 布局 —— Grid 布局

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。...Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。 Grid 布局远比 flex 布局强大！ ?...容器和项目：我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格项目。...image 参考常见的 Grid 布局用例[19] CSS Grid 网格布局教程[20] Grid 布局草案[21] 一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局[22]...://drafts.csswg.org/css-grid/#intro [22] 一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局: https://www.html.cn/archives

4.3K2 0

Jump Start Bootstrap 第1章

Bootstrap将常用的CSS和JavaScript组件组合在一起，满足了许多基本的开发需求，例如创建滑块、产生弹出效果和下拉菜单。Bootstrap封装了许多可以在网站项目中轻松使用的有用组件。...在开发网站的过程中，每个网页设计师都有许多共同的任务，每个项目都重复诸如清除浏览器重新设置、在网页布局中创建网格系统、分配排版规则之类的任务可能会让人感到沮丧并耗费时间。...在2013年发布的版本中，类的名称和项目的文件夹结构都发生了变化。但是请注意，Bootstrap3并不是向后兼容的。你不能通过替换核心的CSS和JavaScript文件，直接迁移到这个版本。...在第2章学习网格系统时，我们将学习更多关于响应性web设计的知识。...它将在你的项目完成时使用，为发布项目准备的。使用Jar包可以在项目中导入webjars包，达到同样效果。

3.5K4 0

【CSS】1287- 一行 CSS 实现 10 种强大的布局

在第一列（在这种情况下，侧边栏）的项目其 minmax 为 150px（在25% ），第二列项目（这里指 main 部分）占据其余的空间作为单一的 1fr 轨道。...您可以使用 repeat() 函数在 CSS 中快速编写网格。对网格模板列使用 repeat(12, 1fr); 将为每个 1fr 提供 12 列。...一种方法是使用网格线放置它们。例如， grid-column: 1 / 13 将跨越从第一到最后一行（第 13 行）并跨越 12 列。grid-column: 1 / 5; 将跨越前四个列。...对于这些卡片，它们被放置在 Flexbox 显示模式中，使用 flex-direction: column 将方向设置为 column。这会将标题、描述和图像块放在父卡片内的垂直列中。...结论感谢您耐心完成对这 10 种强大的 CSS 布局的了解。要了解更多信息，请观看完整视频，并亲自尝试演示。完整视频：https://www.youtube.com/watch?

4.6K2 0

CSS Grid 新手入门

总结来说： CSS Grid 是一个二维的布局系统 CSS Grid 相比传统布局在页面整体划分布局上更加出色 CSS Grid 并不是只能单独使用，依然可以搭配Flexbox以及传统定位布局一起使用...基本概念网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。...5个元素如果是划分3列，那么就应该会有两行。 fr 如果想要均分容器的宽度，那么可以使用新引入的单位fr，新的fr单位代表网格容器中可用空间的一等份。...网格布局中的对齐如果熟悉flex，那么一定会知道flex中的布局，相同的，在grid布局中也有相应的布局网格布局的两条轴线 When working with grid layout you have...相对于容器的列对齐使用align-content这个属性声明来决定整个网格在容器中的列方向的布局，可选的值如下： normal start end center stretch space-around

2.1K6 0

全栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(1)

现在我们在此基础上继续深入学习CSS布局，它是学习CSS之路上一个重点，是在进行前端开发时常常使用到的，所以说我们需要认真学习，若有不懂的地方可以在文章末尾，以及作者交流群【在公众号回复微信交流群】进行留言交流...CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置，本章将主要针对正常布局流, FlexBox(弹性盒子), Grid(网格), Column...，是网格区域 grid areas 在 CSS 中的特定命名。...，是网格区域 grid areas 在 CSS 中的特定命名。... start / span && [ || ] 将网格范围扩展到该网格项目的位置，以使该网格项目的网格区域的相应边缘距离相对边缘

5652 0

CSS进阶12-网格布局 Grid Layout

Figure2 示例性的网格布局示例此外，由于能够明确定位网格中的项目，网格布局允许在视觉布局结构中进行戏剧性的转换，而不需要相应的标记更改。...网格是由水平和垂直网格比交织组成，他将网格容器的空间分为网格区域，网格项目将放置在这些网格区域中。在网格中有两套网格线：一套是沿着水平方向的轴定义列的网格张，另一套是沿着垂直方向的轴定义行。 ?...一个网格项目引用网格线来确定其网格中的位置属性。下面两个例子创建了三个列网格线和四行网格线。第一个示例演示了设计师如何将一个使用网格行号的位置来确定网格项目的位置，第二个例子显式的设置了网格线。...Grid Areas 网格区域是一个逻辑空间，主要用来放置一个或多个网格项目。...Grid Items 在一个网格容器中包含了0个多个网格项目。

6K2 0

二维布局：Grid Layout

您可以通过将规则应用到父元素来使用 Grid Layout。简介 CSS Grid Layout，旨在完全改变我们处理网格的方式，它是二维表格系统。CSS 经常被用来布局，即使它表现得不是很出色。...- 在每个行网格项之间放置一个均匀的空间，在两端放置半个大小的空格 space-between - 在每个行网格项之间放置一个均匀的空间，两端没有空格 space-evenly - 在每个行网格项之间和两端放置一个均匀的空间...grid-auto-columns grid-auto-rows 指定任何自动生成的网格轨道的大小（也称为隐式网格轨道）。当网格项目多于网格中的单元格或网格项目放置在显式网格之外时，将创建隐式轨道。...如果您没有明确放置在网格上的网格项，则自动放置算法会自动放置项目。...值： line - 可以是指定网格线的数字或者其他命名 span - 该项目将跨越提供的网格轨道数量 span - 该项目将跨越，直到它使用提供的名称命中下一行 auto -

4.3K2 0

grid布局—让css变得更简单

在 CSS 网格中，父元素称为容器（container），它的子元素称为项（items）。...四、CSS 网格单位在 CSS 网格中，可以使用绝对定位和相对定位单位如px和em来确定行或列的大小。...十一、 justify-self 水平对齐在 CSS 网格中，每个网格项的内容分别位于被称为单元格（cell）的框内。...该 CSS 网格属性也可以使用其他的值： start：使内容在单元格左侧对齐， center：使内容在单元格居中对齐， end：使内容在单元格右侧对齐....十七、使用grid-area创建区域模板除了使用grid-area放置在模板中命名区域的位置的方式，如果网格中没有定义区域模板，你也通过grid-area创建区域模板，写法如下： grid-area

5.3K2 0

前端-CSS Grid中的陷阱和绊脚石

这是因为在网格中，我们将项目排列成行和列 —— 二维布局。 ...最简单的方法就是使用auto，因为它会默认在隐式网格中创建网格轨道。一个自动大小的网格轨道将扩展到包含所有的内容。在下面的示例中，我有一个两列布局，在右边的列中添加更多的内容会导致整个行的扩展。...可以使用CSS Grid来实现瀑布流布局？很多同学有一种误解，认为网格布局与瀑布流或Pinterest布局一样的。这通常是基于在网格布局中自动放置网格项目，这样的效果看上去的确有点像瀑布流布局。...下面的这个示例中，我在网格中通过伪元素来完成，将其放置在基于行的位置，然后添加一个背景和边框到该网格区域。...当我们在显式网格之外放置一个网格项目，或者我们通过自动旋转更多的网格项目时，隐式网格就将被创建。

4.8K2 0

使用Grid和Flex打造响应式布局：让你的网站“随遇而安”

10px */}.item { grid-column: 1 / 3; /* 将网格项放置在第1列到第2列之间 */ grid-row: 1 / 2; /* 将网格项放置在第1行 */}以上就是Grip...网格自动放置（Grid Auto Placement）grid-auto-placement功能使得网格项可以自动填充空白区域，无需显式指定每个项目的位置。示例代码：<!....container 类定义了一个网格容器，并使用 grid-template-columns 属性将布局划分为三列，每列占据相等的空间。...我们在:root选择器中定义了一个名为--primary-color的CSS变量，并将其值设置为#3498db。...然后，我们在body选择器中使用var()函数来引用这个变量。通过使用CSS变量，我们可以轻松地在整个网站中统一管理样式值，而不需要在每个地方都手动输入相同的值。

5262 1

grid网格布局

轻松使用 Grid 布局提高开发效率，对复杂的网页结构布局更加灵活。Grid 将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。网格是一组相交的水平线和垂直线，它定义了网格的列和行。...我们可以将网格元素放置在与这些行和列相关的位置上。...fr是一个相对尺寸单位，表示剩余空间做等分，此项分配到的百分比(如果只有一个项使用此单位，那就占剩余空间的100%，所以多个项联合使用更有意义，在flex布局中也有用到，这里你可以自由搭配，当然这里也可以使用百分比例如...，可以同时处理行和列，可以通过将css规则用于父元素（网格容器）和该元素的子元素（网格元素）来使用网格布局。...，在低版本的浏览器是无法使用的，但是前段技术进步很快，更新很快，相信在移动端目前grid布局已经支持性很高了，在目前互联网飞速发展的时代，我认为，作为目前最强大的css布局方案，grid终究会是前端布局的一个主流方向

1.9K4 0

CSS_Flex 那些鲜为人知的内幕

其实，我们应该把将 CSS 视为一组布局模式。每种布局模式都是一个可以实现或重新定义每个 CSS 属性的「算法」。我们使用 CSS 声明（键/值对）提供算法，算法决定如何使用它们。...网格布局网格与弹性盒类似，只要在元素上使用了 display: grid，就会开始使用网格布局算法。此布局算法将根据网格布局算法显示所有子元素。...第一个项目是使用流式布局(flow)渲染的，在流式布局中，width是一个「硬性约束」。...一个常见的页眉布局特点是在一侧放置标志，而在另一侧放置一些导航链接。...在每一行内，align-items允许我们将每个单独的子项上下滑动。然而，在整体上，我们有两行在一个单一的 Flex 上下文内！现在，交叉轴将与两行相交，而不是一行。

2851 0

6 个没人讲过的 CSS 属性

自 1994 年以来，设计网站一直是 CSS 的唯一目的，它是一门描述网站外观的语言。多年来，CSS 不断地推出更多的新属性，例如 Flexbox（弹性盒）或是 Grid（网格）。...最常用的方法是使用 CSS 中的 !important 属性来强调当前属性，而忽略所有其他设置和规则。 .header { color: blue !...如果有两行或更多行，则这些行会被放置在前一行的左侧。 vertical-lr：与 vertical-rl 不同，水平地将文本从左到右排列，并且如果有两行或更多行，则这些行会被放置在前一行的右侧。...图源作者我们也可以使用自定义图片作为文本的背景： ? 图源作者值得注意的是，在 Chrome 上我们需要使用 -webkit-background-clip 属性，并确保文本颜色设置为透明。...5. white-space 在使用 text-overflow 的时候，该属性非常有用，因为它允许我们控制元素的文本流。

9391 0

使用 CSS Grid 的响应式网页设计：消除媒体查询过载

前言你是否厌倦了在实现响应式网站时需要管理多个媒体查询？说再见复杂的代码，拥抱更简单的解决方案吧：CSS Grid。...在这篇文章中，我们将踏上一场激动人心的 CSS Grid 之旅，发现它如何消除了对复杂媒体查询的需求，使你能够轻松创建响应式网站。所以，让我们深入研究，彻底改变你对网页设计的方式吧！...让我们开始吧为了更好地理解 CSS Grid，让我们使用 HTML 和 CSS 创建一个简单的网格： Item...通过这个配置，网格将创建尽可能多的列以适应容器，同时保持指定的宽度。列数将根据可用空间自动进行响应性调整。两行的高度将保持在每行100像素的高度上。...让我们分解使用的不同CSS属性：display: grid;：此属性将容器元素定义为网格容器，建立一个新的网格格式上下文。这允许你创建具有行和列的网格布局。

2881 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭