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

为什么我在CSS网格中得到的是列而不是行?

在CSS网格中,如果你得到的是列而不是行,可能是因为你在定义网格布局时出现了错误。CSS网格布局是一个二维布局系统,可以同时定义行和列。默认情况下,网格布局是按照从左到右、从上到下的顺序排列的,所以通常我们会先定义行,再定义列。

如果你得到的是列而不是行,可能是因为你在定义网格布局时,没有正确地指定行和列的数量或大小。你可以通过使用grid-template-rowsgrid-template-columns属性来指定网格的行和列。

例如,如果你想要一个包含3行和2列的网格布局,你可以这样定义:

代码语言:txt
复制
.grid-container {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto auto;
}

在上面的例子中,grid-template-rows属性设置为auto,表示每一行的高度会根据内容自动调整。grid-template-columns属性也设置为auto auto,表示每一列的宽度也会根据内容自动调整。

如果你想要更精确地控制行和列的大小,你可以使用其他单位或值来定义。例如,你可以使用像素值来指定行和列的大小:

代码语言:txt
复制
.grid-container {
  display: grid;
  grid-template-rows: 100px 200px 150px;
  grid-template-columns: 50px 100px;
}

在上面的例子中,第一行的高度为100像素,第二行的高度为200像素,第三行的高度为150像素。第一列的宽度为50像素,第二列的宽度为100像素。

总结起来,如果你在CSS网格中得到的是列而不是行,可能是因为你在定义网格布局时没有正确地指定行和列的数量或大小。你可以使用grid-template-rowsgrid-template-columns属性来指定网格的行和列,并根据需要使用适当的单位或值来定义它们的大小。

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

相关·内容

应用开发为什么选择 Flutter 不是 React Native ?

作为一位开发人员,想在本文中与大家聊聊跨平台开发领域两大核心选项——Flutter 与 React Native 框架,并介绍自己为什么更偏爱 Flutter。...之所以更倾向于 Flutter,当然觉得它在很多方面比 React Native 表现更好。解释具体原因之前,咱们不妨先聊聊这些框架基本情况,以及它们分别适合处理应用项目类型。...为什么更倾向于 Flutter 一段时间以来,React Native 一直全球领先跨平台开发框架。而且 Flutter 出现之前,React Native 可谓无可匹敌。...例如,使用 Flutter 时,应用动画运行速率可以达到每秒 60 帧。 对于混合应用开发,将代码、原生组件以及库集成至新架构时,React Native 会带来更高复杂性。...React Native 官方文档并不提供任何明确支持或定义步骤,导致开发者找不到得到广泛认可发布流程自动化指南。

3.2K20

是否还在疑惑Vue.js组件data为什么函数类型不是对象类型

Vue() //此时vm1应该是这样 vm1 = { //这里data,先获取了函数Vuedata(data值为函数),然后得到了data返回值 this.data = {...Vue() //此时vm2这样 vm2 = { //这里data,先获取了函数Vuedata(data值为函数),然后得到了data返回值 data: { name: '李四...这是因为这两个实例对象创建时,先获得了一个函数,将该函数返回值作为了自己属性data值,并且这两个实例对象data对应地址也不一样,所以他们不会互相影响。...因为我们刚开始定义了构造函数Vue时,给他内部data设置了一个值,该值为对象类型,对象类型js称为引用数据类型,存储着一个指向内存该对象地址。...因为本文也是说到构造函数创建实例对象概念,如果对于JavaScript对象概念不理解的话,也可以翻阅之前写一篇文章,全面剖析了js对象概念——充分了解JavaScript对象,顺便弄懂你一直不明白原型和原型链

3.4K30

框架篇-Vue面试题1-为什么 vue 组件 data 函数不是对象

vue组件data属性值函数,如下所示 export default { data() { // data一个函数,data: function() {}简写 return...// data一个对象 name: 'itclanCoder', }, }; 当一个组件被定义,data必须声明为返回一个初始数据对象函数,因为组件可能被用来创建多个实例 也就是说,很多页面...,定义组件可以复用在多个页面 如果data一个纯碎对象,则所有的实例将共享引用同一份data数据对象,无论在哪个组件实例修改data,都会影响到所有的组件实例 如果data函数,每次创建一个新实例后...Person(); p1.data.name = '川川'; console.log(p1.data.name); // 川川 console.log(p1.data.name); // 川川 挂载原型下属性如果一个对象...,实例化出来对象(p1,p2)都指向同一份实体 原型下属性相当于是公有的 修改一个实例对象下属性,也会造成另一个实例属性跟着改变,这样组件复用时候,肯定是不行,那么改成函数就可以了,如下代码所示

1.9K20

前端-CSS Grid陷阱和绊脚石

这篇文章目的回答其中一些问题,并且将会是Smashing Magazine中有关于CSS Grid一系列文章一篇。 为什么使用CSS Grid不是CSS Flexbox?...一个真正网格二维。这两个维度就是,并且使用网格布局,你可以同时控制它们。使用Flexbox,你可以选择是否将这些项列成一,一个或另一个,不是两个。...最简单方法就是使用auto,因为它会默认隐式网格创建网格轨道。一个自动大小网格轨道将扩展到包含所有的内容。在下面的示例有一个两布局,右边添加更多内容会导致整个扩展。...对于网格布局写作模式。在从左到右语言(ltr)第一左边,而你可以用-1来指向右边。在从右到左语言(rtl)第一右侧,-1则指向左边。  ...如果你隐式网格添加了,然后尝试以-1来指定目标,你将会发现你得到显式网格最后网格线,不是实际网格最末端网格线。

4.8K20

为什么CSS Grid创建布局上比Bootstrap更好

CSS Grid一种在网络上创建布局新方法。我们第一次使用浏览器原生CSS网格布局后,发现这种方式给我们带来太多好处了。...具体来说,需要添加这个: 这可能一些人支持Bootstrap一个论点:尽可能简化网络时候,你不必太担心CSS只需HTML定义布局。...CSS Grid让HTML展现出应该展现东西——内容元素。视觉效果属于CSS。 Bootstrap 如果我们想在Bootstrap做同样事情,就必须改写HTML。...所以这个例子完美地说明了迄今为止意识到CSS Grid最大优势。 不再有12限制 这谈不上一个严重问题,但也经常对造成困扰。...你可以想要多少网格就要多少网格,下面就是一个7网格: 通过设定为完成,如下所示: 现在确实已经有了破解Boostrap这个缺陷方法,而且也知道Bootstrap4也使用了Flexbox,但是仍然测试

2.2K60

分分钟学会CSS Grid布局

本文中,将尽可能快速地介绍CSS网格基本知识。我会把你不应该关心一切都忽略掉了,只是为了让你了解最基础知识。...image.png 已经添加了一些样式,但是这与 CSS Grid 没有任何关系。 Columns() 和 rows() 为了使其成为二维网格容器,我们需要定义。让我们创建3和2。...: 100px 100px 100px; } 将得到以下布局: image.png 不知道你发现没有,我们只页面上看到 3×2 grid(网格),而我们定义 3×3 grid(网格...以下屏幕上显示内容: image.png 如果你不明白我们设置只有 3 为什么有4条网格线呢?...看看下面这个图像,画了黑色网格线: image.png 请注意,我们现在正在使用网格所有

95520

CSS Grid 那些鲜为人知内幕

❝叔本华:人生没有意义,人生就是一团欲望,欲望满足了就空虚,满足不了就痛苦,人生就像摆钟空虚和痛苦来回摇摆。❞ 大家好,「柒八九」。...轨道 ❝轨道两个相邻网格线之间空间。 ❞ 我们可以将它们看作网格。 在这个例子,这是第二网格线和第三网格线之间轨道。 网格区域 ❝网格区域由四条网格线围成总空间。...grid2017年才发布。 ❝Grid最令人神往地方就是它网格结构,即行和,具体表现就是这些页面布局只需 CSS 定义即可。...如何抉择 构建显示布局时,我们可以通过使用areas和/都可以达到目的,但是呢,使用areas时,它允许我们给grid分配语义含义,不是使用晦涩难懂/数字。...键盘用户注意事项 ❝处理网格分配时存在一个重要问题:Tab 键顺序仍然基于 DOM 位置,不是网格位置。 ❞ 通过一个示例会更容易理解。

12910

10分钟内就可以学会几个CSS高招

所以,完全理解为什么你会讨厌 CSS,但今天,于分享一个小课程,你将学习如何使用现代功能编写干净 CSS,同时避免 2021 年以及未来不应该编写糟糕代码。...当学习基本 CSS 时,你将更好地控制你代码创造力和自由度,直到我进入 Web 开发职业生涯后,得到最好建议学习 CSS 盒模型,因为当你理解它时,语言开始变得更有意义,事实上它很简单,现在就教你盒子模型...Grid 允许你考虑大图布局,当你将元素设置为显示网格时,它对开发人员更加友好,你可以将其子项定义为一堆。 ? 宽度可以用网格模板属性定义,我们在这里有三个值: ?...由空格分隔,这意味着我们有三注意 fr 值或小数单位将负责与网格其他共享可用空间,我们还可以定义一些,现在网格每个元素都将自动定位,但重要请注意,与 flexbox 布局或上帝禁止表格布局相比...今天,虽然不是所有地方都支持它,但我们可以使用宽高比属性不是填充废话,我们可以视频上定义宽高比,我们就完成了。 消除 CSS 代码让它更有趣一个重要部分,但同样重要让你代码更灵活。

1.4K20

5分钟学习css网格

网格布局网站设计基础,CSS网格模块创建网站最强大,最简单工具。...个人认为它比Bootstrap更好 这个模块今年也得到了主流浏览器(Safari,Chrome,Firefox,Edge)本地支持,所以我相信所有的前端开发者都不得不在不久将来学习这个技术 本文中...直到你理解了基础知识之后,才会把你不应该关心一切都抛脑后 你第一个网格布局 CSS Grid两个核心成分包装(父)和物品(子)。... 为了使它成为二维,我们需要定义。我们创建三和两。...以下屏幕上显示内容 ? 当你们为什么只有3时候,我们有4条专栏?看看这个图片,画了黑色线 ? 请注意,我们现在正在使用网格所有

1.7K20

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

很好奇选择这个名字原因。 帖子布局由2* 4网格组成。...不知道为什么团队会选择这种方法,但我更喜欢使用gap属性。 为什么不使用命名CSS网格区域呢? 根据我目前观察到情况,有三种网格布局变体,它们都可以受益于使用命名网格区域。...尝试复制网格并基于命名区域构建它。与指定值相比,它看起来更容易扫描。...网格内联CSS变量 很高兴看到像Threads这样大型应用程序正在使用和许多其他人提倡东西。 在用户个人资料中,选项卡网格布局使用包含选项卡数内联CSS变量构建。 很有用。...动态视口单位使用 喜欢启动画面中使用动态视口单位dvh。 防御性CSS策略 为了确保flexbox布局不会因为最小内容长度破裂,使用min-width: 0来重置该行为。

15020

关于使用现代CSS新特性布局嵌套评论组件尝试,希望对你有所启发

好奇心驱使下,为什么不去查看一些热门网站,并了解一下它们如何实现评论组件布局。起初,认为这将是一个简单任务,但实际并非如此。...本文中将这些称为“深度”。 图中展示了深度如何根据每个评论嵌套级别变化。 思考布局 深入细节之前,更愿意先着手处理布局,并确保它能很好地运作。.... */ li { padding-left: 3rem; } } 你提到为什么更喜欢使用样式查询不是数据属性原因: 更易于理解:样式查询采用 @container 语法,简单文字描述已经足够表达其含义...这个网格看起来会像这样: 目前,CSS网格,不能将主网格传递给子项目。我们情况下,希望将网格列传递给第一个 ,然后再传递给该 。...这就是为什么添加了 grid-column: 1 / -1。这意味着:“从第一到最后一,让评论组件横跨全部”。这样做有助于避免嵌套每个深度手动输入列号。

32330

CSS 新版网格布局简述

如果计算机计算能力足够强大,是不是人这个东西也可以用物理量进行表示。 网格布局 CSS 网格一个用于 web 二维布局系统。利用网格,你可以把内容按照格式进行排版。....container { display: grid; } 与弹性盒子不同定义网格后,网页并不会马上发生变化。...为了让容器container看起来更像一个网格,我们要给刚定义网格加一些。那就让我们加几个个宽度为200px这里加了5个,当然,这里可以用任何长度单位,包括百分比。...显式网格与隐式网格关系与弹性盒子main和cross轴关系有些类似。 隐式网格中生成/大小参数默认auto,大小会根据放入内容自动调整。...函数第二个参数,我们使用minmax函数来设定一个/最小值,以及最大值1fr。

1.6K10

简明 CSS Grid 布局教程

函数第一个参数表明了后续宽配置要重复多少次,第二个参数表示需要重复配置,这个配置还可以具有多个长度设定,举个例子:repeat(2, 100px 200px)会得到这样效果: 1.1.3 自动填充...某些情况下,我们需要给网格创建很多来填满整个容器,容器宽度可变,也就没办法确定 repeat 次数了,这时可以使用 repeat 函数关键字auto-fill来实现这个效果。...,你CSS中看到就是实际会出现排版效果了。...例如现在有 3 x 3 网格容器,a 、b都占两,默认情况下由于 b 第一不够空间,最终会放到第二,然后 c b 后面。...其实不能...如果给第二加一个固定宽度,的确可以解决问题,但这就不是预期 1fr 了。

2.8K20

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

网格系统(CSS Grid)CSS中最重要特性之一。它能够以简单方式将元素对齐到CSS网格使得设计复杂且响应式网页变得更加容易,无需使用浮动、表格或定位。...网格模板(grid-template-rows) 属性grid-template-rows用于定义网格容器行数。...它与grid-template-columns类似,唯一区别是现在我们处理不是。 假设我们想要定义一个具有两和两网格容器。...它们之间没有区别,只是我们处理不是网格间隔属性(grid-gap) 网格间隔属性grid-gap用于父元素内设置之间间隔。...结论 网格一个令人惊叹CSS特性,它使你能够轻松设计复杂且响应式布局结构。强烈建议你多加练习这个特性,因为只有通过实践才能更好地掌握它。

18030

CSS】343- CSS Grid 网格布局入门

网格线编号,网格单元格,网格轨道 网格线存在于每一侧线。一组垂直线将空间垂直划分成另一组水平线将空间水平划分成行。...这意味着我们之前例子,有四条垂直线和四条水平线包含它们之间。 ? 网格项从一个位置跨越到另一个位置时,网格线变得非常有用。 网格轨道两条线之间空间。网格轨道可以是一或一。...网格单元格很像表格单元,两条相邻垂直线和两条相邻水平线之间空间。这是网格中最小单位。 定位网格采取了前面的例子网格,并用数字从1到9标记每个单元格,不是X或O,下面样子: ?...假设想将第 6 个框移到第 2 个框位置。没有CSS网格,不改变 HTML 情况下,这几乎一个不可能任务,至少对而言。...结论 CSS网格布局允许我们更快地布局,并且更容易控制。本教程,我们学习了如何用CSS网格来定义布局, fr单位,repeat 函数和一些网格系统特定术语。

1.9K10

grid网格布局

轻松使用 Grid 布局提高开发效率,对复杂网页结构布局更加灵活。Grid 将网页划分成一个个网格,可以任意组合不同网格,做出各种各样布局。网格一组相交水平线和垂直线,它定义了网格。...我们可以将网格元素放置与这些相关位置上。...第一三个都是header表示第一header独占一占了所有位置,那么为什么三个header呢,这个其实是不固定,因为我们第三放了三个格子三个div即box123,所以我们应当在设计模板时候考虑一最多那一会放多少个...,可以同时处理,可以通过将css规则用于父元素(网格容器)和该元素子元素(网格元素)来使用网格布局。...,那就是因为目前grid布局还不够普及导致兼容性还较差,低版本浏览器无法使用,但是前段技术进步很快,更新很快,相信移动端目前grid布局已经支持性很高了,目前互联网飞速发展时代,认为,

1.9K40

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

-2a62de81e431 原文作者: Per Harald Borgen 翻译作者: hanxiansen 在这篇文章将教你如何使用 CSS Grid 来创建一个超酷图像网格图,它将根据屏幕宽度来改变数量...设置 本文中,将继续使用第一篇 CSS Grid 布局教程文章网格布局。然后,我们将在文章末尾添加图片。下面我们初始化网格外观: ?...第一个参数指定数量,第二个参数指定它们宽度,因此它将为我们提供与开始时完全相同布局: ? auto-fit 然后auto-fit。...但如果有更多可用空间,栅格布局将简单地将其均分给每,因为这些变成了 fraction 单位,不是 100px。 添加图片 最后一步添加图片。...浏览器兼容性 结束本文前,提下浏览器支持情况,撰写本文时,全球77%网站将支持 CSS Grid,而且比例还在逐步攀升。 想想2018将是 CSS 网格布局元年。

1.5K10

CSS实现 | 食物系虚拟流光键盘

大家好,法医,一只治疗系前端码猿,与代码对话,倾听它们心底呼声,期待着大家点赞与关注➕ 啥食物系虚拟流光键盘?键盘不是分什么轴嘛,啥时候键盘还有食物系?能吃吗?...其实这个效果袁老师公开课上看到,第一眼看到就情不自禁地迷上了,特别喜欢,那必须得做一个出来,键盘基础上加上了呼吸灯效果,感觉更炫了,值得每一个人拥有,快来跟我实现一个属于自己酷炫键盘...创建栅格容器 栅格布局第一步就是创建一个栅格容器,这点跟弹性盒布局定义弹性容器很像,它们都会将一个父元素定义为栅格或者弹性容器,容器生成网格布局后,其所有子元素为「网格元素」,弹性容器子元素「弹性元素...设置容器 grid-template-columns() 和 grid-template-rows(),如图: repeat函数一种简写形式,当达到一定数量时候,用repeat...随即我们得到如下样式 紧接着我们需要做就是设置每个按键样式 然后键盘就变成这样了,是不是有点感觉了,起码像个按键了,别急,还没完!

84040

二维布局:Grid Layout

CSS Grid Layout CSS 中最强大布局系统。不像 flexbox 那样一维系统,它是一个二维系统,可以同时处理。...Flexbox 在这方便帮了忙,但它目标简单一维布局,不是复杂二维布局。(事实上,Flexbox 和 Grid 能很好地协作)Grid 第一个真正用于布局 CSS 模块。...justify-item 沿着内联()轴对齐网格项(不是沿着块()轴对齐对齐项)。此值适用于容器内所有网格项。...align-items 沿着网格线对齐网格项(不是沿着网格线对齐对齐项)。此值适用于容器内所有网格项。...此属性沿着内联()轴对齐网格不是沿着块()轴对齐网格对齐内容)。

4.3K20

CSS Grid 新手入门

总结来说: CSS Grid 一个二维布局系统 CSS Grid 相比传统布局页面整体划分布局上更加出色 CSS Grid 并不是只能单独使用,依然可以搭配Flexbox以及传统定位布局一起使用...从图中可以看出浏览器兼容率整体达到84.16%,并且都是无需带前缀。 基本概念 网格一组相交水平线和垂直线,它定义了网格。我们可以将网格元素放置与这些相关位置上。...Grid Tracks (网格轨迹) 从字面上意译来看还是比较绕口,但是换一种说法你可能就会明白了。可以把tracks看做table就好了。 ?...5个元素如果划分3,那么就应该会有两。 fr 如果想要均分容器宽度,那么可以使用新引入单位fr,新fr单位代表网格容器可用空间一等份。...Grid布局和Flex布局最大不同点就是:Grid布局二维布局,针对布局,Flex布局为一维布局,只针对的当布局。 Tips: 这两种布局并不冲突,可以搭配使用。

2.1K60
领券