腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
2
回答
不需要媒体查询的CSS网格单列布局
、
我有用于桌面屏幕的CSS网格布局,按顺时针方向进行,如下所示: 代码: .grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px 1px; grid-template-areas: "one two" "four three"; } .one { grid-area: one; } .two { grid-area: two; } .three { grid-area: three
浏览 3
提问于2020-08-01
得票数 0
回答已采纳
4
回答
如何在CSS网格布局中指定行高?
、
、
、
我有一个CSS布局,在这个布局中,我想使中的一些(中间3)行延伸到它们的最大大小。我可能正在寻找一个类似于flex-grow: 1对Flexbox所做的属性,但我似乎找不到解决方案。 注意:这是专为应用程序设计的,所以浏览器兼容性并不是一个真正的问题。 我有以下CSS网格布局: .grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; grid-gap: 10px; height: calc(100vh - 10px); } .grid .box { background-color: grey;
浏览 0
提问于2017-01-29
得票数 88
回答已采纳
3
回答
如何在CSS中设置网格中的该配置在图片中?
、
、
.grid-container { display: grid; grid-gap: 10px; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .grid-item { background: blue; height: 100px; } .grid-item .item1 { grid-row-start: 1; grid-row-end: 3; } <div class="grid-container"> <div class=
浏览 31
提问于2021-09-14
得票数 2
1
回答
Html网格.模板-宽度和高度相同的列
、
我需要在网格中显示视频元素,其中一些网格将没有视频元素,而一些网格将与视频元素,所有时间每个网格都应该有相同的宽度和高度。 但是在下面的例子中,第二个和第三个网格有不同的宽度,rest都有相同的宽度。如果我把每个带有视频元素的网格放到每个网格中,那么每个网格都有相同的大小,如果删除每个视频元素网格都具有相同的维数。问题是当某个网格中有视频元素时。我该怎么解决这个问题。 <!DOCTYPE html> <html> <head> <style> body, html { width: 100%; h
浏览 2
提问于2020-05-16
得票数 1
回答已采纳
2
回答
如何在CSS网格项中垂直和水平地对文本进行居中?
、
、
奇怪的是,CSS网格没有能够很容易做到这一点的属性(我在这里的代码:)。 .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-gap: 20px; align-items: center; justify-content: center; } .container div { background-color: gray; height: 100px; } <div class="container"
浏览 6
提问于2022-06-01
得票数 0
回答已采纳
1
回答
添加网格间隙会导致行项目溢出网格容器,但不会溢出列项目
、
我遇到过一个网格布局的例子,我不明白为什么向行和列添加网格间距会导致行项目溢出容器(我理解这一点),而不是列项目;相反,容器可以扩展而不会溢出。 body { padding: 20px; } .grid-container { border: 5px solid black; font-family: avenir, sans-serif; font-weight: bold; display: grid; grid-template-columns: repeat(4, 25%); grid-template-rows: 100px 100px; ga
浏览 0
提问于2021-05-20
得票数 0
1
回答
如何使用网格css对齐内容
、
、
我想要对齐使用网格在我的css对齐按钮和其他元素在我的网页上。 我想排成三个并排标题,然后按钮在底部空间从顶部的三个标题在8 px和中心按钮。然后在按钮和包含底部混乱的两个div之间留出一个边距,如此图像中所述。 但我不能用这个代码。我想使用css技术的网格,标题列网格和按钮和两个消息div在线网格。 .grid-container { display: grid; } <div> <div> <h4>Title 1</h4> <h4>Title 2</h4> <h4&g
浏览 3
提问于2022-05-07
得票数 0
1
回答
CSS -如果元素不存在,则进行网格定位
、
、
是否有可能以这样的方式准备网格:如果给定的元素不存在,它会插入可用的元素?例如,如果没有第一个元素,那么在第一行中我们有"item middle“? <div class="grid-container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div cl
浏览 26
提问于2021-03-14
得票数 0
2
回答
为什么没有水平相邻的两个网格单元?
、
、
.grid-container { display: grid; grid-template-columns: 2fr; grid-template-rows: 1fr; } <div class="grid-container"> <span>1</span><span>2</span> </div> 我预计会有两个‘网格-单元’水平相邻。相反,它们是垂直叠加的。为什么会这样呢? 我认为grid-template-columns/rows指定了网格单元的尺寸和布局。
浏览 3
提问于2020-12-24
得票数 0
回答已采纳
4
回答
CSS-Grid:如何在不缩小项目本身的情况下使内容居中?
、
、
、
使用CSS-Grid时,我尝试将项目放在网格单元的中心,而不是将它们完全缩小到只显示内容。这个是可能的吗? 我在stackblitz上做了一个简单的例子。您可以看到,这些项目并没有用背景颜色填充整个网格单元格。让它正常工作的正确方法是什么?我可以删除justify-items/align-items类,但是内容不再居中。 单元格已填充,但内容未居中: 单元格未填充,但内容居中: .wrapper { display: grid; height: 100vh; grid-template-columns: 1fr 1fr; grid-template-r
浏览 1
提问于2018-02-17
得票数 9
2
回答
用CSS网格重新排序项目
、
、
我即将开始我的第一步CSS网格,已经使用了启动加上Javascript的网格,直到现在。我首先想说的是,如果我知道怎么做的话,我知道它是非常简单的。 假设我有一些类似于这样的HTML: <div class="container"> <div id="a">Blah</div> <div id="b">Blurgh</div> </div> 在桌面上,我想要一个2列布局,左边是块a,右边是块b。 在移动(使用媒体查询)上,我想要一个列,上面的块b为a(所以,与正常
浏览 0
提问于2019-01-17
得票数 4
回答已采纳
1
回答
css网格布局静态响应列和行
、
、
我有一个CSS网格布局(8x4)。预览: : 我有8科尔和4排。列使用1fr单元响应(全宽度)。 但我不能得到同样的行为行(需要4行全高)。我怎么才能拿到呢? 我的代码: HTML: <div class="grid"> <div id="item-1" class="item item-1"> <span>1</span> </div> <div id="item-2" class="item item-2">
浏览 0
提问于2018-02-04
得票数 0
回答已采纳
5
回答
如何在网格项之间添加垂直线?
、
、
我目前有一些麻烦,以添加垂直线之间的网格项目。我的当前解决方案在行之间有空空间,我不能使用边框,因为边框将直接“粘合”项,而不是在两个项的中间。 上面的代码当前如下所示: 但应该是这样的: #grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px; } .grid-item { height: 20px; background-color: red; position: relative; } .grid-item::after { co
浏览 9
提问于2020-05-08
得票数 5
回答已采纳
1
回答
为什么fr单元不能与CSS网格上的网格模板行一起工作?
、
、
我不能让grid-template-rows和fr单位一起工作。我可以得到行高,以改变其他单位,如像素,但不能用fr单位。 我不明白为什么这不起作用,因为fr部门正在使用grid-template-columns。 .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; grid-gap: 5px; text-align: center; } <div class="gr
浏览 0
提问于2020-03-31
得票数 5
回答已采纳
2
回答
为什么在使用2行和4行的网格模板区域时,行的高度是不同的?
、
我得到了一个令人惊讶的行为,使用网格模板-领域,我不明白。在下面的CodePen中可以看到使用4行的布局: HTML: <div class="container"> <h3>Title</h3> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> <
浏览 7
提问于2022-09-25
得票数 1
回答已采纳
1
回答
如何使用javascript将css-grid元素放置到网格容器中
、
、
、
我正在用普通的js和css网格做一个记忆游戏。我已经看到了使用flex-box的解决方案,但是我想用css-grid代替它。我现在面临的挑战是使用javascript将网格元素放入网格容器中。我知道如何在css中这样做,但不能用js来完成。到目前为止,我已经尝试了以下几种方法,但没有运气: const fillGrid = () => { let i = 1; document.getElementsByClassName('grid-item').forEach(element => { element.style.gridArea
浏览 1
提问于2019-09-23
得票数 1
2
回答
如何将网格列与另一个网格布局相等地设置
、
我有2种类型的布局使用显示网格。 但我想知道为什么第一列的宽度不相等? 第一列宽度为: 239.40px 布局2第一列宽度为: 240.70px 如何使用fr来平等地设置它? 这是我的密码 .grid-container { display: grid; grid-gap: 25px; } /* News Module 1 */ .grid-container--news1 { grid-template-columns: 2fr 1fr 1fr 1fr; } .grid-container--news1 .grid-item:nth-of-type(1) { grid
浏览 5
提问于2022-04-12
得票数 2
回答已采纳
1
回答
画布力网格单元无限展开
、
、
、
、
ts: templateStyle = { display: 'grid', 'grid-template-columns': 'calc(25%-10px) calc(25%-10px) calc(25%-10px) calc(25%-10px)', 'grid-template-rows': '150px auto auto', 'grid-gap': '10px', border: '1px solid #21
浏览 0
提问于2021-02-15
得票数 0
回答已采纳
2
回答
尝试获得正确的CSS网格布局
、
我正在设计自己的网站使用HTML和CSS。我决定使用网格,如下所示: /* Style the grid container */ .item1 { grid-area: logo; } .item2 { grid-area: cta; } .item3 { grid-area: menu; } .item4 { grid-area: spacer; } .item5 { grid-area: left; } .item6 { grid-area: right; } .grid-container { display: grid; grid-
浏览 7
提问于2021-01-03
得票数 0
2
回答
网格项目可以包装吗?
、
、
、
我如何使网格项目包装在他们的容器内?因为每当输入64作为新的网格大小时,网格项就会溢出其容器。我想要网格项调整到网格容器的大小。 因此,基本上,我希望网格容器保持其大小,不管添加了多少新的网格项。 const grid = document.querySelector('#grid-container'); function makeGrid(rows, cols) { for (let i = 0; i < (rows * cols); i++) { grid.style.setProperty('--grid-rows', rows)
浏览 7
提问于2022-05-12
得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
HTML5+CSS制作Grid网格布局入门及源码
工作时使用CSS时可以免费使用的在线工具
2018年你应该了解的前端新技术
基于 Flexbox和CSS Grid 的高效布局
Flex布局教程
热门
标签
更多标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
活动推荐
运营活动
广告
关闭
领券