首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用CSS Grid和容器类将其放入两列?

使用CSS Grid和容器类将内容放入两列的方法如下:

  1. 首先,在HTML中创建一个包含内容的容器元素,例如一个div元素。
代码语言:txt
复制
<div class="grid-container">
  <!-- 内容放在这里 -->
</div>
  1. 在CSS中,为容器元素添加display属性,并将其值设置为grid,以启用CSS Grid布局。
代码语言:txt
复制
.grid-container {
  display: grid;
}
  1. 接下来,使用grid-template-columns属性来定义两列的宽度。可以使用绝对单位(如像素)或相对单位(如百分比)来指定宽度。
代码语言:txt
复制
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列宽度相等 */
}
  1. 最后,将内容放入两列中的相应位置。可以使用grid-column-start和grid-column-end属性来指定内容所占的列数。
代码语言:txt
复制
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid-item {
  grid-column-start: 1; /* 内容开始于第一列 */
  grid-column-end: 2; /* 内容结束于第二列 */
}

完整的示例代码如下:

代码语言:txt
复制
<div class="grid-container">
  <div class="grid-item">
    <!-- 第一列的内容 -->
  </div>
  <div class="grid-item">
    <!-- 第二列的内容 -->
  </div>
</div>
代码语言:txt
复制
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid-item {
  grid-column-start: 1;
  grid-column-end: 2;
}

这样,内容就会被放置在两列中,并且两列的宽度相等。你可以根据需要调整列的宽度和内容的位置。

请注意,以上示例中的代码只是一种实现方式,你可以根据具体需求和设计来调整CSS Grid的属性和样式。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何使用FlexboxCSS Grid,实现高效布局

虽然 Flexbox CSS Grid 可以完成类似的布局,但是本次,我们学习的是如何组合使用个工具,而不是只选择其中的一个。...尤其在控制列表元素样式设置导航与按钮之间的间距方面,特别有用。 使用 CSS Grid 创建布局 为了测试效率,接下来使用 CSS Grid 创建相同的基本布局。...接下来,需要调整 header 容器中的 fr 单元。将 grid-template-columns 设置为 1fr 1fr。...这样 header 中就有个相同大小的,放置导航项按钮会很合适。...基本的布局如下图所示: 这种布局需要在行个方向上保持一致,所以使用 CSS Grid 实现整体布局十分有效。 规划对于布局的实现来说,十分重要。 接下来看看代码如何一步步实现。

3.4K10

CSS 新版网格布局简述

如图: 然后我们对css规则做点改变,来了解网格是如何工作的。 首先,将容器的display属性设置为grid来定义一个网络。与弹性盒子一样,将父容器改为网格布局后,他的直接子项会变为网格项。...另外,fr可以与一般的长度单位混合使用,比如grid-template-columns: 300px 2fr 1fr,那么第一宽度是300px,剩下的会根据除去300px后的可用空间按比例分配。...网格间隙 使用 grid-column-gap 属性来定义间隙;使用 grid-row-gap 来定义行间隙;使用 grid-gap可以同时设定者。...显式网格与隐式网格的关系与弹性盒子的maincross轴的关系有些类似。 隐式网格中生成的行/大小是参数默认是auto,大小会根据放入的内容自动调整。...当然,你也可以使用grid-auto-rowsgrid-auto-columns属性手动设定隐式网格的大小。

1.6K10

How to make your HTML responsive by adding a single line of CSS

-2a62de81e431 原文作者: Per Harald Borgen 翻译作者: hanxiansen 在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变的数量...设置 在本文中,我将继续使用我在第一篇 CSS Grid 布局教程文章中的网格布局。然后,我们将在文章末尾添加图片。下面是我们初始化网格的外观: ?...如果我们将grid-template-columns的值更改为1fr 2fr 3fr,第二的宽度将会是其它倍。...这是一个强大的指定行的方法。...我们在每个网格中添加一个图片标签: 为了使图片适应于每个条目,我们将其宽、高设置为与条目本身一样,我们使用object-fit

1.5K10

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

属性分别设置行间距间距。...顺序就是由grid-auto-flow决定,默认为行,代表"先行后",即先填满第一行,再开始放入第二行。...stretch:拉伸,占满单元格的整个宽度(默认值) 应用场景 文章开头就讲到,Grid是一个强大的布局,如一些常见的 CSS 布局,如居中,布局,三布局等等是很容易实现的,在以前的文章中,也有使用...关于兼容性问题,结果如下: 总体兼容性还不错,但在 IE 10 以下不支持;目前,Grid布局在手机端支持还不算太友好。 10.如何使用CSS提高页面性能?...动画或者过渡尽量使用transformopacity来实现动画,不要使用lefttop属性 总结 css实现性能的方式可以从选择器嵌套、属性特性、减少http这三面考虑,同时还要注意css代码的加载顺序

12311

CSS Grid 那些鲜为人知的内幕

我们可以使用grid-template-columns[7]属性指定: 通过将个值传递给grid-template-columns —— 25%75% —— 告诉Grid算法将元素分成。...基于fr单位的无论如何缩小容器宽度,该也不会收缩到其最小内容大小以下。 ❝更准确地说:fr单位分配额外的空间。首先,宽将根据其内容计算。如果有剩余空间,它将根据fr值进行分配。...此时我们用gap来设置所有行之间添加了固定量的空间 看看在%fr之间切换时会发生什么: 当使用基于%的时,内容会溢出到网格父容器之外。这是因为%是使用总网格区域来计算的。...如何抉择 在构建显示布局时,我们可以通过使用areas行/都可以达到目的,但是呢,使用areas时,它允许我们给grid分配语义含义,而不是使用晦涩难懂的行/数字。...只使用CSS 属性,我们就可以将子元素水平和垂直居中于容器中: 正如我们所学到的,justify-content 控制的位置。align-content 控制行的位置。

11810

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

grid-auto-rows 属性: 默认是 auto大小会根据放入的内容自动调整,手动设定隐式网格轨道的大小。 grid-gap 属性:同时定义网格的、行间隙,若想单独定义请看下面个属性。...元素在默认情况下是如何布局的? 首先,取得元素的内容并将其放在一个独立的元素盒子中,然后在其周边加上内边距、边框外边距——就是我们所说的盒子模型。...然后,一个块级元素会填充其父元素所有的行向空间,并沿着其块向伸长以容纳其内容,行级元素的大小就是其本身的大小;如果你想要控制行级元素的 display 属性,请使用 CSS 将其设置为块级元素(例如,使用...3.网格布局 (Grid) 描述: CSS 网格是一个用于 web 的二维布局系统,Grid 网格布局设计用于同时在个维度上把元素按行排列整齐, 为啥会出现网格布局?...布局 display: grid, 并使用 grid-template-rows grid-template-columns 个属性定义了一些行的轨道,最后使用grid-gap定义网格间隙,

32820

创建水平滚动的正确方式【CSS 网格布局】

本文,我们探讨 CSS 网格的弹性布局,它是如何帮助我们实现水平滚动的,同时处理它带来的缺陷。...如下: 需要注意的是,容器端的距离周围内容的距离是匹配的(也就是整体布局要和谐)。 整体布局 现在,我们已经基本明白水平滚动容器的特性了。接下来,我们考虑使用 CSS Grid 网格布局来编码。...使用 CSS Grid 网格布局方便我们控制元素之间的距离,无需进一步计算。...带 .full 名的子元素,将会占据全部视窗的宽度且没有内边距。 滚动容器 我们使用六个卡片来创建水平滚动容器,一次显示张。...一种使其更灵活的处理方式是,你可以使用 Javascript 来计算卡片的数量,然后将其分配给 CSS 变量。

2.5K50

万字总结 CSS 布局

,这里给出种方法: 使用clear属性清除浮动 块级格式化上下文(Block Formatting Context) 首先我们来看看如何使用 clear清除浮动。...因此,最常见的清除浮动的hack方案是:在容器内添加一个CSS伪元素,并将其clear属性设置为both: <!...网格布局 5.1 Grid 布局是什么 网格是一组相交的水平线垂直线,它定义了网格的行。CSS 提供了一个基于网格的布局系统,带有行,可以让我们更轻松地设计网页,而无需使用浮动定位。...上图是一个 4 x 4 的网格,共有5根水平网格线5根垂直网格线。 5.3 容器属性 Grid 布局的属性分成。一定义在容器上面,称为「容器属性」;另一定义在项目上面,称为「项目属性」。...❞ 5.3.5 grid-auto-flow 属性 划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是"先行后",即先填满第一行,再开始放入第二行,即下图数字的顺序。

5.6K20

Grid网格布局入门

Grid 布局则是将容器划分成”行””,产生单元格,然后指定”项目所在”的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。...上图是一个 4 x 4 的网格,共有5根水平网格线5根垂直网格线。 三、容器属性 Grid 布局的属性分成。一定义在容器上面,称为容器属性;另一定义在项目上面,称为项目属性。...如果的宽度分别为1fr2fr,就表示后者是前者的倍。...3.5 grid-auto-flow 属性 划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是”先行后”,即先填满第一行,再开始放入第二行,即下图数字的顺序。 ?...这个属性之中,也可以使用span关键字,表示跨越多少个网格。

2.1K20

前端|Grid实现自适应九宫格布局

1 前言 现在无论是做app还是做网站,宫格的布局也是必然存在的,那么如何使用css实现自适应的九宫格布局呢?下面简单来介绍一下css里面的grid实现九宫格布局。...2 相关属性函数 2.1 fraction单位 CSS 栅格布局带来了一个全新的值:fraction单位,fraction单位通常简写为fr,它允许你根据需要将容器拆分为多个块。...下面将每一行更改为一个 fraction 单位的值: .grid {display: grid;//划容器为三个1fr的grid-template-columns: 1fr 1fr 1fr;/.../划容器为三个1fr的行 grid-template-rows: 1fr 1fr 1fr;} 结果是栅格布局将会把整个宽度高度各分成三个 fraction,每每行都会各占据一个 fraction...如果我们将grid-template-columns的值更改为1fr 2fr 1fr,第二的宽度将会是其它倍。

3.1K30

CSS进阶12-网格布局 Grid Layout

它为作者提供了一种机制,使用一组可预测的大小调整行为将可用空间分配给行。然后,作者可以将其应用程序的构造块元素精确定位设置到由这些行的交叉点定义的网格区域grid area中。...下面个例子创建了三个网格线四行网格线。第一个示例演示了设计师如何将一个使用网格行号的位置来确定网格项目的位置,第二个例子显式的设置了网格线。.../*具有三个网格线四个行网格线*/ #grid { display: grid; grid-definition-columns: 150px 1fr; /**/ grid-definition-rows...网格单元是网格行网格的交集。它是定位网格项时可以引用的网格的最小单元。 在接下来的例中定义了一个三行的网格。...可以使用grid-template”属性为网格容器显式的设置网格区域,或者隐式的使用网格线创建网格区域。网格项目可以使用grid-placement”属性将其分配给一个网格区域。

5.9K20

grid布局—让css变得更简单

四、CSS 网格单位 在 CSS 网格中,可以使用绝对定位相对定位单位如pxem来确定行或的大小。...不同点仅在于,当容器的大小大于各网格项之和时,auto-fill将会持续地在一端放入空行或空,这样就会使所有网格项挤到另一边;而auto-fit则不会在一端放入空行或空,而是会将所有网格项拉伸至合适的大小...使用示例: 在为container2的网格中,用auto-fitrepeat来填充网格,其中宽的最小值为60px,最大值为1fr。...示例: 用displaygrid-template-columns,使为item3元素转换为有且宽度为auto1fr的网格。...content; /* 用displaygrid-template-columns,使为item3元素转换为有且宽度为auto1fr的网格。

5.3K20

css grid 布局那些事儿

CSS Grid 是一种为 Web 开发创建网站布局的方式。它已经存在了很多年,随着更多浏览器的支持,它终于变得越来越流行。 接下来我们将了解下 CSS Grid 及其工作原理。了解下如何使用它。...在这种情况下,CSS Grid 可以派上用场! CSS 网格架构 有使用 CSS 网格布局的方法:隐式显式。使用隐式网格,您只需定义所需的数,浏览器将自动创建网格。...然而,与主要是一维的传统 CSS 布局不同,CSS Grid 旨在同时处理个维度。 它是一个基于容器的布局系统。这意味着它适用于作为容器元素的子元素的元素。...使用 CSS Grid,您可以创建具有多多行的布局,并且可以轻松控制页面上每个元素的大小位置。 CSS Grid 的另一个好处是它有助于保持代码整洁有序。...创建网格布局 您需要首先定义一个容器元素并为其分配一个名。此元素将包含您的所有内容。在容器内部,您将定义一系列子元素,每个子元素将占据网格的特定区域。您可以使用各种属性来控制这些元素的大小位置。

2K30

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

说再见复杂的代码,拥抱更简单的解决方案吧:CSS Grid。在这篇文章中,我们将踏上一场激动人心的 CSS Grid 之旅,发现它如何消除了对复杂媒体查询的需求,使你能够轻松创建响应式网站。...这个系统能够精确控制网页布局,摆脱了传统定位浮动方法的约束。使用 CSS Grid,元素可以在这些行内轻松对齐,从而彻底改变了我们设计网站的方式。...通过这个配置,网格将创建尽可能多的以适应容器,同时保持指定的宽度。数将根据可用空间自动进行响应性调整。行的高度将保持在每行100像素的高度上。...,.grid-container 应用于将容纳网格项的容器元素。...让我们分解使用的不同CSS属性:display: grid;:此属性将容器元素定义为网格容器,建立一个新的网格格式上下文。这允许你创建具有行的网格布局。

21010

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

Grid 布局是将容器划分成了“行””,产生了一个个的网格,我们可以将网格元素放在与这些行相关的位置上,从而达到我们布局的目的。 Grid 布局远比 flex 布局强大! ?...网格轨道:grid-template-columns grid-template-rows 属性来定义网格中的行容器内部的水平区域称为行,垂直区域称为。...笔者会在介绍每个属性的时候,做个小 demo 演示,建议大家可以自己修改看看效果加深记忆 Grid 布局属性可以分为大类,一容器属性,一是项目属性。...Grid 实战——实现响应式布局 经过上面的介绍,相信大家都可以看出,Grid 是非常强大的。一些常见的 CSS 布局,如居中,布局,三布局等等是很容易实现的。...image 参考 常见的 Grid 布局用例[19] CSS Grid 网格布局教程[20] Grid 布局草案[21] 一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局[22]

2.3K20

移动开发-响应式

"> 布局容器: Bootstrap 需要为页面内容栅格系统包裹一个 .container 容器,它提供了个作此用处的 container : 响应式布局的容器 固定宽度 大屏...流式布局容器 百分百宽度 占据全部视口 (viewport) 的容器 栅格系统介绍: 栅格系统英文为 Grid systems ,翻译为网格系统,是指将页面布局划分为等宽的,然后通过数的定义来模块化页面布局....col-xs- .col-sm- .col-md- .col-lg 栅格系统用于通过一系列行与的组合来创建页面布局,内容就可以放入这些创建好的布局中 行 (row) 可以去除父容器的15px边距...可以将向右侧偏移,这些实际是通过使用 * 选择器为当前元素增加了左侧的边距 (margin) 1 2 排序: 通过使用 .col-md-push .col-md-pull 就可以改变

2.4K20

5分钟学习css网格

序言 您将在本文中,简单了解到如何使用网格布局,一种布局有多种实现方式,曾今对于使用老的弹性盒模型(display:box)以及新的flex(display:flex)布局用过的话,对于css Grid...直到你理解了基础知识之后,我才会把你不应该关心的一切都抛在脑后 你的第一个网格布局 CSS Grid个核心成分是包装(父)物品(子)。...行 为了使它成为二维的,我们需要定义行。我们创建三行。...如果我们还有三个,那么最下面的一行也会被填充 要定位调整项目的大小,我们将定位它们并使用网格网格行的属性 .item1{ grid-column-start:1;...个属性设置宽和行高是多少,又通过grid-column-start与grid-column-end个属性定位字元素的位置项目的大小,关于网格布局内容很多,自己知道的也只是冰山一角,有待挖掘探索

1.7K20

二维布局:Grid Layout

CSS Grid Layout 是 CSS 中最强大的布局系统。不像 flexbox 那样的一维系统,它是一个二维系统,可以同时处理行。...基础浏览器兼容性 开始你要用 display:grid 定义一个网格容器,用 grid-template-columes grid-template-rows 设置行的尺寸,然后将子元素放在表格的行中...有垂直(网格线)、水平(网格行线)、驻留在行侧的线。下面黄色的就是网格线。 网格轨道 个相邻网格线之间的空间。你能把它们想象成是网格或行。...下面的网格轨道就是第二条第三条行线之间的空间。 网格单元 个相邻行个相邻网格线之间的空间。它是网格的单个“单元”。这是行网格线12以及网格线23之间的网格单元。...grid-template-rows 使用以空格分隔的值列表定义网格的行。

4.3K20
领券