有什么是我可以用隐式网格做但不能用显式网格做的吗?

2024-03-12

我们有隐式网格grid-auto-rows and grid-auto-columns。然而我们也可以使用grid-template-rows/grid-template-columns结合repeat and auto-fit创建显式隐式网格。

有什么我们可以做的吗only做与grid-auto-* and not with grid-template-*结合repeat and auto-fill/auto-fit?

如果是,有没有办法指定显式^行/​​列after隐含的?

就像我有 3 个显式行,然后是隐式网格(因为我需要它,因为我无法使用显式网格做这件事),然后是一个显式行。


有什么是我可以用隐式网格做但不能用显式网格做的吗?

是的。隐式网格处理其存在或位置是不可预料的。这是隐式网格的主要好处。显式网格仅限于其存在或位置是可预测.

我们有隐式网格grid-auto-rows and grid-auto-columns。然而我们也可以使用grid-template-rows / grid-template-columns结合repeat and auto-fit创建显式隐式网格。

你的第二句话并不完全正确。

没有什么是“隐含的”(术语是规范中定义 https://www.w3.org/TR/css3-grid-layout/#implicit-grids) about grid-template-rows / grid-template-columns结合repeat and auto-fit or auto-fill. The repeat()符号表示可预测的轨道模式。这使得它完全“明确”(同样,正如术语一样规范中定义 https://www.w3.org/TR/css3-grid-layout/#explicit-grids).

有什么我们可以做的吗only做与grid-auto-* and not with grid-template-*结合repeat and auto-fill/auto-fit?

如果事先知道网格的所有列和行,答案是否定的。

答案是肯定的,如果事先不知道网格的所有列和行。

如果是,有没有办法指定显式^行/​​列after隐含的?

就像我有 3 个显式行,然后是隐式网格(因为我需要它,因为我无法使用显式网格做这件事),然后是一个显式行。

可能吧。您必须展示代码示例。

想象一个具有三行的网格——标题、内容、页脚。

但内容部分的行数未知。

在这种情况下,你可以这样做:

#container {
  display: grid;
  grid-template-rows: 50px auto 50px;
}

#content {
  display: grid;
  grid-auto-rows: 200px;
}

这是一个完整的示例:

body {
  display: grid;
  grid-template-rows: 50px auto 50px;
  height: 100vh;
  margin: 0;
}

main {
  display: grid;
  grid-auto-rows: 200px;
  overflow: auto;
  background-color: gray;
}

main > article:nth-child(even) {
  background-color: aqua;
}

header { background-color: lightgreen; }
main   { background-color: orangered;  }
footer { background-color: gray;       }
body   { font-size: 1.1em; margin: 0;  }
<header>header</header>
<main>
  <article>content</article>
  <article>content</article>
  <article>content</article>
  <article>content</article>
  <article>content</article>
  <article>content</article>
  <article>content</article>
</main>
<footer>footer</footer>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

有什么是我可以用隐式网格做但不能用显式网格做的吗? 的相关文章

  • 将 CSS 生成的三角形拆分为 2 个水平不同的相同颜色

    正如您应该能够通过此代码看到的那样fiddle http jsfiddle net Xh36r 1 以及下面 我希望能够分割显示在第二个 div 顶部的 CSS 生成的三角形水平均等在 之间orange and green使用的颜色 现在它
  • 如何让div与包含td的高度相匹配?

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此
  • 如何在表格列标题处垂直旋转文本

    我用过这个数据表 http www datatables net 在我的网页上 这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方 我想要 第一个数字第二个数字列应该垂直旋转 我已经做到了 但是 问题
  • 嵌套计算操作

    希望这很简单 我想使用CSS calc操作来执行两个计算 我想将宽度设置为等于 100 7 2 但是 如果我尝试在 CSS 计算操作中执行多个操作 则会失败 width calc 100 7 2 如何在一个 CSS 语句中执行多个计算操作
  • CSS 显示无不工作

    media screen and min width 900px and max width 1215px menu display none 这不起作用 div 仍然可见 但是 如果我将 div 更改为 div class menu 代替
  • 为不同的字体系列指定不同的字体大小

    有没有办法为不同的字体系列指定不同的字体大小 我想要使 用的字体 出于产品品牌目的 是一种有点罕见的字体 FlashDLig 并非所有 PC 和浏览器都支持 我的一台带有 IE 9 的 Windows 7 PC 不显示它 现在 对于我使用
  • 如何使用 CSS 媒体查询检测设备方向?

    在 JavaScript 中 可以使用以下方式检测方向模式 if window innerHeight gt window innerWidth portrait true else portrait false 但是 有没有一种方法可以仅
  • 内嵌显示定义术语和描述

    我正在为页面上的某些元素使用定义列表 并需要它们内联显示 例如 它们normally看起来像 我需要它们看起来像 注意多个 DD 我可以让它们在 moz 中使用 float 来正常工作 但无论我尝试什么 它们都无法在 IE 中工作 我通常会
  • 适用于移动设备的响应式订单确认电子邮件?

    我从未见过令人惊叹的订单确认 发票电子邮件 即使是最好的 html5 网站也会发送糟糕的订单确认电子邮件 有时是纯文本 我相信这是因为发票通常需要使用表格来显示购买的物品 这在移动设备上实现起来非常困难 我发现了一些让手机上的表格更易于管理
  • Bootstrap 导航栏与 Google 位置重叠自动完成下拉菜单

    我有一个导航栏 我试图在其中添加一个地点搜索框 除了谷歌位置提示框的一小部分被导航栏重叠 如下图所示 之外 一切几乎都有效 我尝试过改变z index输入框的值改为10或2000或90000但似乎没有效果 我还缺少其他需要做的事情吗 这是
  • 为什么使用 iPhone 或 iOS 设备在“iframe”中查看“position:fixed”时不起作用?

    我研究过 stackoverflow 似乎position fixed在 iOS 移动设备的 iframe 中 https stackoverflow com questions 15874910 position fixed and if
  • 使用纯 CSS 创建向上和向下箭头图标或按钮

    我正在尝试使用纯 CSS 且无背景图像创建如下所示的 向上和向下 控制按钮 但是当我在 中添加箭头的CSS时li className after or li className before 主盒子的位置移动了 这是我遇到的问题的小提琴 g
  • Quill 公开可用的 CSS

    我最初的目的是从 PrimeFaces TextEditor 组件输出的 HTML 生成 PDF 文件 而该组件又基于 免费开源 WYSIWYG 编辑器 Quill 为此 我需要获取 TextEditor 组件生成的 HTML 将其包含在
  • 重新创建 CSS3 过渡三次贝塞尔曲线

    在 CSS3 过渡中 您可以将计时函数指定为 cubic bezier 0 25 0 3 0 8 1 0 在该字符串中 您仅指定曲线上点 P1 和 P2 的 XY 因为 P0 和 P3 始终分别为 0 0 0 0 和 1 0 1 0 根据苹
  • 使用内联样式有哪些风险?

    A 内容安全政策 https developer mozilla org en US docs Web HTTP CSP with a default src or style src指令将阻止内联样式应用于
  • 编辑类名中带有空格的元素的 css 样式

    我正在创建一个 tumblr 我必须编写一个外部 CSS 文件 但我在编辑 post 元素的 css 样式时遇到问题 这是它的结构 li class post quote other code li 问题是类名中有空格 我如何创建一个 CS
  • 如何将大于整个页面 100% 的元素居中对齐?

    我有一个宽度为 100 的 div 并且隐藏了一个宽度为 3000px 的 div 我希望3000px的div左右均匀地被切断 我会使用背景位置 中心 然而 事情比这更复杂 3000px div 包含 30 100px div 我尝试过在
  • 为什么网格项目不居中?

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL
  • GWT 主题/模板 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在使用 GWT 开发一个应用程序 尽管 GWT 是基于 JAVA 的媒介 但外观和感觉只能通过 CS
  • 没有类的 CSS 选择器

    我正在使用选择器来选择不具有一个类的所有元素 list th not foo some rules 我怎样才能将其应用到多个班级 list th not foo list th not bar some rules 上面的 CSS 当然不会

随机推荐