允许一个网格项目使用固定的标题和侧边栏滚动
我有一个两列两行的网格布局.粘性左侧导航、粘性标题以及将显示在网格右下角的内容. 我现在的内容差不多了，但我希望 .content div 在内容超出屏幕时使用滚动.我以为我可以只使用 overflow: auto，但这不起作用.我的东西很接近吗? body {边距:0；溢出:隐藏；}.页 {显示:网格；网格模板行:55px 自动；网格模板列:20vh 自动；网格模板区域:“导航标题"
..
css-grid相关内容
使用 html 网格布局跨多行调整列大小
我有一个 2 列 3 行的网格布局. 我希望能够调整列宽.我知道我可以使用 resize: horizontal 但这只会改变一行的宽度. 我想我不能做我想做的事，我需要使用嵌套网格，但我不确定，所以我想检查一下. .容器 {显示:网格；网格模板列:1fr 1fr；网格模板行:1fr 1fr 1fr；间隙:0px 0px；网格自动流:行；网格模板区域:“标志搜索
..
如何隐藏不适合网格的项目?
我有一个水平放置 6 个项目的网格. 每个项目的最小宽度为 200 像素. 如果没有足够的空间容纳整个项目，则应隐藏该项目. 现在，当没有足够的空间容纳整个项目时，它会部分显示.我如何隐藏不完全适合网格的项目，而不是部分显示. 进一步解释: 每个网格项为 200 像素. 如果网格宽度为 400 像素，则只显示 2 个项目并隐藏其余项目.当网格宽度移动到 600p
..
如何重置 CSS 网格中项目的宽度?
我们有一个由 Flexbox 完成的平铺项目的遗留部分.项目的容器是一个 ul: ul.icon-grid {显示:弹性；flex-wrap: 包裹;列表样式:无；填充左:0;} 然后里面的项目是li: .icon-swatch__wrapper {宽度:180px；高度:110px；文本对齐:居中；字体大小:12px；边框:1px 实心 #ccc；边距:5px；填充:10px；} 我不得
..
网格项内容的基线是如何确定的?
这真的让我很困惑.请参阅下面的两个演示:
第一行名称
..
CSS 网格布局:如何使背景颜色跨越多个单元格?
..
使网格项跨越到隐式网格中的最后一行/列
当我不知道行数时，是否可以使网格项从第一行跨到最后一行? 假设我有以下 html，其中包含未知数量的框. 如何使第三个 .box 从第一条网格线延伸到最后一条网格线? .container {显示:网格；网格模板列:repeat(3, minmax(10rem, 1fr)) [last-col] 35%;网格模板行:自动 [最后一行]；}.盒子 {背景颜色:蓝色；填充:20px；
..
如何让 CSS 网格容器保持响应式正方形大小?
我希望网格容器保持方形.所以当屏幕调整大小时，它会变大或变小，但它的高度将始终与宽度相同.我想在里面放 3 张图片，上面一张占两列，下面一张是方形的，每列占一列. HTML: SASS: .container: {背景:#fff;最大宽度:600px；填充:10px；}.网格 {显示:网格；网格模板列:1fr 1f
..
在Chrome中不会显示超过999行
由于某种原因，在Chrome中，一旦打印了999行，元素就会开始相互重叠.它在Firefox中工作正常.我正在使用的Chrome版本是 70.0.3538.102(正式版本)(64位)，该版本今天早些时候才发布. 这些页面是按字母顺序排序的，在其他任何页面上我都不会遇到此问题，因为"A"页面是唯一具有999行以上的页面.
..
CSS Grid 4列布局，其中2个列标题用于< dl>.
给出标记: dldtdddd..dtdddd... 我正在尝试使用CSS网格实现以下布局: dt dtdd dd dd dddd dd dd dddd dd dd dddd dd dd dd 我目前的做法是: .time-table {显示:网格；网格间隙:1em;grid-template-columns:repeat(4，1fr);网格模板区域:“目的地1目的地1目的地
..
CSS网格在Google Chrome浏览器中显示不正确
我正在使用CSS Grid布局以具有3列布局.即使我已经提到 list1 跨越三行，但 list1 却仅跨越一行. .wrapper {最大宽度:940px；保证金:0自动;显示:-ms-grid;显示:网格；-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3，1fr);}.wrapper> div {边框:2px实线#f767
..
CSS网格布局与其他布局系统有何区别?
CSS网格布局与现有的布局框架(例如，引导程序或其他布局，例如
..
为什么我不能从CSS Grid Layout中删除所有死区?
/* http://meyerweb.com/eric/tools/css/reset/v2.0 |20110126许可证:无(公共领域)*/html，身体，div，跨度，小程序，目的，iframe，h1h2h3，h4，h5，h6，p，块引用，前一种，缩写首字母缩写，地址，大的，引用，代码，德尔，dfn，他们img，ins，kbd，qs样品小的，罢工，强的，子SUP，ttvar，b，你一世，中央，
..
创建动态网格时防止div增长/拉伸
我正在处理动态图像网格，但无法将网格保留在容器中.这个想法很简单，使用jQuery在容器中添加任意数量的框，并在添加框后将其缩小以适合容器，而无需添加滚动条或退出屏幕.这是在添加列的过程中进行的，但是在添加行时，它只会在屏幕底部运行. 如何修复容器div，以便在添加行时缩小图像，而不是在滚动条上添加行? 函数GenerateGrid(rows，cols){//获取容器的可用空间.var
..
是否可以在不同列的CSS网格的内部间隙中绘制垂直分隔符?
我想要一个可变长度元素的响应式网格.网格应填充包含元素的可用宽度，并且列数根据容器的宽度而变化.使用CSS网格很容易实现.但是，我不知道如何在列之间添加垂直边框(即，仅在内部列间隙中).下面的简单演示在出现三列的情况下设法实现了垂直边框: https://codepen.io/yowzadave/pen/OYPvLd?editors=1100 html，正文{框大小:border-b
..
CSS网格和文本溢出:省略号
使用CSS网格时，即使将其应用于包含要缩短文本的dom对象，我似乎也无法设法使text-overflow:省略号起作用. 这里. .grid {显示:网格；grid-template-columns:repeat(3，1fr);grid-gap:10px;}.grid .grid-item {最小宽度:0；边框:1px纯红色；}.grid .grid-item .content {背
..
带有固定边栏的CSS网格
除了中央div之外，我还需要在网站上设置固定的标题和侧边栏.侧边栏应具有自己的滚动条，就像中央div一样.我以为网格布局将是实现此目的的方法，但我不能避免正文显示一个公共滚动条，而不是每个容器都显示自己的滚动条. 我应该怎么做?网格确实是更简单的解决方案吗? body {显示:网格；grid-template-columns:1fr 1fr;grid-template-rows:自动
..
垂直对齐和CSS网格关系
垂直对齐和CSS网格如何协同工作?我有一个元素紧挨着需要在中间精确对齐的元素.见下文: .alphabet {font-size:80px;/*下面不起作用...为什么?*/垂直对齐:中间；}.letter-grid {显示:flex;}.filter-item-grid {显示:网格；显示:-ms-grid;grid-template-columns:自动自动；证明内容:间隔；align
..
动态更改CSS网格中的行数
我有一个使用CSS Grid设计的网页.这就是它的样子- 我正在 react/redux 项目中使用它.基于变量，我必须显示/隐藏用户的用户名. 因此，我想更改网格的行数，因此尝试使类 display:none 像这样 .username {显示:无；} 但是，它所做的只是删除 CSS Grid User 字符串，但是该行存在，并留有空白. 有什么办法可以动态更改行数/列
..
需要行以填充剩余空间
查看图片以了解当前情况.我希望黄色部分( .content )向下推动底部黑色部分( .footer )并展开以占据所有剩余的屏幕空间(水平和垂直).但是正如您所看到的，两者都没有.该图像后底部的代码:
..