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

顺风CSS -如何制作一个有两列的网格,其中第一列有20%的宽度,第二列有80%的宽度?

在前端开发中,可以使用CSS来制作一个有两列的网格,其中第一列有20%的宽度,第二列有80%的宽度的方法如下:

  1. 使用HTML结构创建网格布局:
代码语言:txt
复制
<div class="grid-container">
  <div class="column1"></div>
  <div class="column2"></div>
</div>
  1. 使用CSS样式定义网格布局:
代码语言:txt
复制
.grid-container {
  display: grid;
  grid-template-columns: 20% 80%;
}
.column1 {
  /* 第一列样式 */
}
.column2 {
  /* 第二列样式 */
}

通过上述代码,我们创建了一个grid-container容器,其中包含两个子元素column1和column2。使用grid-template-columns属性,我们设置了两列的宽度比例为20%和80%。你可以根据实际需要来调整这些比例。

关于网格布局的更多信息,你可以参考腾讯云的Web开发相关产品Flexbox布局的介绍链接地址:https://cloud.tencent.com/document/product/764/32336

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

相关·内容

CSS 新版网格布局简述

如果计算机计算能力足够强大,是不是人这个东西也可以用物理量进行表示。 网格布局 CSS 网格一个用于 web 二维布局系统。利用网格,你可以把内容按照行与格式进行排版。...如图: 然后我们对css规则做点改变,来了解网格如何工作。 首先,将容器display属性设置为grid来定义一个网络。与弹性盒子一样,将父容器改为网格布局后,他直接子项会变为网格项。...2fr可用空间,余下各被分配了1fr可用空间,这会使得第一宽度第二第三倍。...另外,fr可以与一般长度单位混合使用,比如grid-template-columns: 300px 2fr 1fr,那么第一宽度是300px,剩下会根据除去300px后可用空间按比例分配。...第一个传入repeat函数值(3)表明了后续配置要重复多少次,而第二个值(1fr)表示需要重复构建配置,这个配置可以具有多个长度设定。

1.6K10

grid布局方式使用「建议收藏」

正常情况下,n行n + 1根水平网格线,m列有m + 1根垂直网格线,比如三行就有四根水平网格线。 上图是一个 4 x 4 网格,共有5根水平网格线和5根垂直网格线。...grid-template-columns: repeat(2, 100px 20px 80px); 上面代码定义了6第一和第四宽度为100px,第二和第五20px,第三和第六为....container { display: grid; grid-template-columns: 150px 1fr 2fr; } 上面代码表示,第一宽度为150像素,第二宽度是第三一半....container { grid-gap: 20px 20px; } 如果grid-gap省略了第二个值,浏览器认为第二个值等于第一个值。...3.5 grid-auto-flow 属性 划分网格以后,容器子元素会按照顺序,自动放置在每一个网格。默认放置顺序是”先行后”,即先填满第一行,再开始放入第二行,即下图数字顺序。

2K10
  • Grid网格布局入门

    正常情况下,n行n + 1根水平网格线,m列有m + 1根垂直网格线,比如三行就有四根水平网格线。 ? 上图是一个 4 x 4 网格,共有5根水平网格线和5根垂直网格线。...grid-template-columns: repeat(2, 100px 20px 80px); 上面代码定义了6第一和第四宽度为100px,第二和第五20px,第三和第六80px....container { display: grid; grid-template-columns: 150px 1fr 2fr; } 上面代码表示,第一宽度为150像素,第二宽度是第三一半....container { grid-gap: 20px 20px; } 如果grid-gap省略了第二个值,浏览器认为第二个值等于第一个值。...3.5 grid-auto-flow 属性 划分网格以后,容器子元素会按照顺序,自动放置在每一个网格。默认放置顺序是”先行后”,即先填满第一行,再开始放入第二行,即下图数字顺序。 ?

    2.1K20

    最强大 CSS 布局 —— Grid 布局

    Grid 会为我们创建编号网格线来让我们来定位每一个网格元素。m 列有 m + 1 根垂直网格线,n 行 n + 1 跟水平网格线。比如上图示例中就有 4 根垂直网格线。...固定行高和宽 repeat() 函数:可以简化重复值。该函数接受个参数,第一个参数是重复次数,第二个参数是所要重复值。...grid-template-columns: 200px 1fr 2fr 表示第一个宽设置为 200px,后面剩余宽度分为部分,宽度分别为剩余宽度 1/3 和 2/3。...grid-template-columns: 1fr 1fr minmax(300px, 2fr) 意思是,第三个宽最少也是要 300px,但是最大不能大于第一第二倍。...其中它跟 .three (垂直网格线是从3 到 4,水平网格线是从 1 到 4) 是冲突。可以设置 z-index 去决定它们层级关系 ?

    3.2K20

    Jump Start Bootstrap 第2章

    我们将学会网格系统如何工作;我们如何在应用中使用网格系统;我们也将创建简单网页布局去更好理解它。 什么是网格系统?...这里每一都由一个数字表示。 ? 建立一个基本网格 在本节中,我们将使用Bootstrap网格系统创建我们第一个网站布局。我们将使用与我们在上一章中创建相同设置。...最后,我们一个完整HTML页面响应式,可以手动调整浏览器宽度,动态地观察布局变化。我希望您在理解引导程序网格系统时发现这个案例研究很有用。...由于我们在这里启动了一个新行,其中任何都可以跨12格,但是这一行宽度将被限制到它父类宽度。 让我们用一个例子来说明这个问题。...这个新现在被放置在第一中。

    2.9K40

    理解 CSS 布局和 BFC

    你可能从未听说过这个术语,但是如果你曾经用CSS做过布局,你可能知道它是什么,理解什么是 BFC,怎么工作以及如何创建 BFC 非常有用,这些可以帮助你理解CSS布局是如何工作。...块格式化上下文(BFC)行为通过一个简单float示例很容易理解。在下面的示例中,我一个框,其中包含向左浮动图像和一些文本。...这是因为当我们浮动一个元素时,文本所在宽度保持不变,为给浮动元素腾出空间而缩短是文本行框。这就是为什么背景和边框会出现在浮动后面的原因。 我们通常有种方法来解决这个布局问题。...查看演示 在多布局中使用 BFC 如果我们创建一个占满整个容器宽度布局,在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了宽从而所有宽度会超出容器。...不过无论如何,你现在应该已经理解了什么是 BFC,以及如何使用 overflow 或其他方法来包裹浮动,以及知道了 BFC 可以阻止元素去环绕浮动元素,如果你想使用弹性或网格布局可以在一些不支持他们浏览器中使用

    1.2K00

    理解 Css 布局和 BFC

    你可能从未听说过这个术语,但是如果你曾经用CSS做过布局,你可能知道它是什么,理解什么是 BFC,怎么工作以及如何创建 BFC 非常有用,这些可以帮助你理解CSS布局是如何工作。...块格式化上下文(BFC)行为通过一个简单float示例很容易理解。在下面的示例中,我一个框,其中包含向左浮动图像和一些文本。...在多布局中使用 BFC 如果我们创建一个占满整个容器宽度布局,在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了宽从而所有宽度会超出容器。...创建一个 BFC 现在尽管盒子宽度稍有改变,但布局不会打破。当然,对多布局来说这不一定是个好办法,但能避免最后一下掉。...不过无论如何,你现在应该已经理解了什么是 BFC,以及如何使用 overflow 或其他方法来包裹浮动,以及知道了 BFC 可以阻止元素去环绕浮动元素,如果你想使用弹性或网格布局可以在一些不支持他们浏览器中使用

    1.4K00

    分享一些关于 CSS Grid 基础入门知识

    网格系统(CSS Grid)是CSS中最重要特性之一。它能够以简单方式将元素对齐到和行中。CSS网格使得设计复杂且响应式网页变得更加容易,无需使用浮动、表格或定位。...网格模板(grid-template-columns) 属性grid-template-columns用于定义网格容器中数。它还可以帮助定义每个宽度。 假设你想在网格容器内定义3。...你任务是使其具有响应式布局,因此你决定在桌面上每显示三个产品,在平板上每显示个产品,而在手机上每只显示一个产品。...它与grid-template-columns类似,唯一区别是现在我们是在处理行而不是。 假设我们想要定义一个具有网格容器。...结论 网格一个令人惊叹CSS特性,它使你能够轻松设计复杂且响应式布局结构。我强烈建议你多加练习这个特性,因为只有通过实践才能更好地掌握它。

    18430

    简明 CSS Grid 布局教程

    ,比如grid-template-columns: 100px 1fr 2fr结果就是第一宽度是 100px,剩下会根据去掉 100px 后可用空间按比例 1: 2 来分配。...假设现在我们定义一个 1 行x 2 宽高都为 100px 网格容器,并在其中放置了 a 和 b 网格项: 如果我们把网格项 a 和 b 放置到已定义网格之外的话: .a { grid-column...例如现在有 3 x 3 网格容器,a 、b都占,默认情况下由于 b 在第一行不够空间,最终会放到第二行,然后 c 在 b 后面。...其中第二内容是一串连续字符,由于没有特意设置 work-bread 属性,所以显然第二内容会超出预期宽度: 这种问题设置下 word-break: break-word 就好,但这是最简单情景...其实不能...而如果给第二一个固定宽度,的确可以解决问题,但这就不是预期 1fr 了。

    2.8K20

    开心档-软件开发入门之CSS 网格容器

    个人主页:爱学iOS小麦子主页​​​​​​ 前言 本章将会讲解Ruby CGI Session CSS 网格容器 图片 网格容器 要使 HTML 元素变成一个网格容器,可以将 display 属性设置为...网格容器内放置着由和行内组成网格元素。 grid-template-columns 属性 grid-template-columns 属性定义了网格布局中数量,它也可以设置每个宽度。...属性值是一个以空格分隔列表,其中每个值定义相对应列宽度。 如果您希望网格布局包含 4 ,则需要设置 4 宽度,如果所有宽度都是一样,可以设置为 auto。...属性值是一个以空格分隔列表,其中每个值定义相对应行高度: 实例 .grid-container { display: grid; grid-template-rows: 80px 200px...; } justify-content 属性 justify-content 属性用于对齐容器内网格,设置如何分配顺着弹性容器主轴(或者网格行轴) 元素之间及其周围空间。

    67620

    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,第二宽度将会是其它倍。...总宽现在是四个 fraction 单位,第二占据个 fraction 单位,其它各占一个 fraction。效果如下: ? 总的来说,fraction 单位值将使你可以很容易更改宽度。...第一个参数指定行与数量,第二个参数指定它们宽度,因此它将为我们提供与开始时完全相同布局: ? auto-fit 然后是auto-fit。

    1.5K10

    重新认识visibility 原

    今天看到table中,样式支持四个css表格样式之外属性:border width background visibility。...2、表格col元素设置collapse时,该隐藏,表宽度自动减少。 对于如果该列有横向合并 单元格,合并格宽度自动减少, 但“内容不会自动再布局,而是直接剪去相应宽度。clipped!"...假如是合并格原先是居中,collapse其中某一后,合并格像从右边直接剪去宽度,就是文字不再重排,不会居中,文字如果长的话,直接会tgtg截断! 3、col元素设置display:none。...个人理解,它不去影响表格样式,只是让自身col标签没有。 什么意思呢?...假如一组col标签控制表格每个宽度,如果设置其中一个col为display:none时,并不会让相应列隐藏,而只是让当前col标签失效,从而后面的col影响

    64320

    水平垂直居中深入挖掘

    在上篇文章 -- 一行 CSS 代码魅力 最后,提到了种快速实现水平垂直居中方式。 当然,CSS 中实现水平垂直居中方式很多。...: 5px; } 看看结果如何: ?...CodePen Demo -- Centering in CSS 2 简单分析分析: absolute 方法明显问题,由于用绝对定位,其实 3 个子元素都叠在了一起 flex 和 grid 方法...,如果不手动添加边距(margin 或者 gap),会贴在一起 不限制方向的话,flex 默认是水平排列,grid 是竖直排列 非常重要一点,grid 布局下子元素宽度,所有子元素宽度会被强行拉伸至最宽一个子元素内容宽度...(也就是拉伸至网格宽度) 对于多个子元素,absolute 方法明显不适用, 接下来主要看剩余 3 个方法在一些细节上差异。

    98720

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

    一个真正网格是二维。这个维度就是行和,并且使用网格布局,你可以同时控制它们。使用Flexbox,你可以选择是否将这些项列成一行或一个或另一个,而不是个。...这里一个简单示例,突出其区别。第一个布局使用Flexbox,为了能尽可能多使用盒子,以适合可用宽度。这里我们控制了整个行中布局。...为了制作一个Flexbox网格”,我们必须阻止Flexbox做灵活操作,而是应该设置百分比宽度,就像我们前面的浮动网格示例一样。...最简单方法就是使用auto,因为它会默认在隐式网格中创建网格轨道。一个自动大小网格轨道将扩展到包含所有的内容。在下面的示例中,我一个布局,在右边中添加更多内容会导致整个行扩展。...传给minmax()函数第一个值,它是网格轨道最小值,第二个值是网格轨道最大值。因此,你可以设置200px行,但通过auto设置为网格轨道最大值,那么当较多内容时,不会出现内容溢出。

    4.8K20

    grid布局了解一下

    repeat出现了,见词知意,repeat意思是重复。 那么刚才我们写法就可以写成: repeat(3,100px),接收个参数,第一个是重复次数,第二个是像素值。...如下最小值为150px 最大值为1fr,当我们缩小浏览器窗口,可以看到第一元素还在变小,而第二元素固定在了150px。...,我们第一和第三是固定宽度,然后第二是自适应宽度,此时我们就可以使用auto .main { display: grid; border: 10px solid...grid-auto-flow 划分网格后,容器子元素会按照顺序,自动放置在每一个网格,默认是 先填满第一行,然后再开始第二行。也就是说我们 grid-auto-flow属性,默认是row。...指定item具体位置 grid-column-start/end 我们让item1以第一个网格线开始,到第三个网格线结束(注意这里是网格线)。

    44320

    二维布局:Grid Layout

    CSS Grid Layout 是 CSS 中最强大布局系统。不像 flexbox 那样一维系统,它是一个二维系统,可以同时处理和行。...垂直(网格线)、水平(网格行线)、驻留在行和线。下面黄色就是网格线。 网格轨道 个相邻网格线之间空间。你能把它们想象成是网格或行。...下面的网格轨道就是第二条和第三条行线之间空间。 网格单元 个相邻行和个相邻网格线之间空间。它是网格单个“单元”。这是行网格线1和2以及网格线2和3之间网格单元。...- 第一个值设置 align-items,第二个值设置 justify-items 。...如果第二个值被忽略,那么第一个值就对个属性生效。 grid-auto-columns grid-auto-rows 指定任何自动生成网格轨道大小(也称为隐式网格轨道)。

    4.3K20
    领券