程序员经验分享-hwhale

CSS 网格具有不等高和宽的列

2024-07-01

我有 5 个盒子：三个在第一行，接下来的两个在第二行：

I want all the boxes but the second to be of equal height and the 5th box to go right under the 3th.

我用 flexbox 尝试过，现在正在尝试display: grid。我正在寻找 CSSonly解决方案，如果可能的话。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-auto-rows: min-content;
  grid-gap: 0;
  background-color: #2196F3;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  border: 1px solid #ccc;
  font-size: 30px;
}
.item4 {
  grid-column-start: 1;
  grid-column-end: 3;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-container">
  <div class="item1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt blanditiis facere eius placeat suscipit consequuntur ullam dolor quod tenetur. Nostrum deleniti id temporibus officia, itaque voluptatibus laudantium ad porro.</p></div>
  <div class="item3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>  
  <div class="item4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item5"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
</div>

What I am looking for is well illustrated in the picture bellow: enter image description here

我该怎么做才能达到想要的结果？


这是一种使用方法基于行的布局 https://www.w3.org/TR/css-grid-1/#line-placement.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: repeat(10, 1fr);
  grid-gap: 5px;
  padding: 5px;
  height: 100vh;
  background-color: #2196F3;
}

/* line-based placement */
.item1 { grid-column: 1 / 2; grid-row: 1 / 4; }
.item2 { grid-column: 2 / 3; grid-row: 1 / 8; }
.item3 { grid-column: 3 / 4; grid-row: 1 / 4; }
.item4 { grid-column: 1 / 3; grid-row: 8 / 11; }
.item5 { grid-column: 3 / 4; grid-row: 4 / 11; }

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  border: 1px solid #ccc;
}
* { box-sizing: border-box; margin: 0; }
<div class="grid-container">
  <div class="item1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt blanditiis facere eius placeat suscipit consequuntur ullam dolor quod tenetur. Nostrum deleniti id temporibus officia, itaque voluptatibus laudantium ad porro.</p></div>
  <div class="item3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>  
  <div class="item4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item5"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
</div>

这是另一种使用方法grid-template-areas https://www.w3.org/TR/css-grid-1/#grid-template-areas-property.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: repeat(10, 1fr);
  grid-gap: 5px;
  padding: 5px;
  height: 100vh;
  background-color: #2196F3;
  
  grid-template-areas:
  
    " item1 item2 item3 "
    " item1 item2 item3 "
    " item1 item2 item3 "
    "   .   item2 item5 "
    "   .   item2 item5 "
    "   .   item2 item5 "
    "   .   item2 item5 "
    " item4 item4 item5 "
    " item4 item4 item5 "
    " item4 item4 item5 ";
}

.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
.item4 { grid-area: item4; }
.item5 { grid-area: item5; }

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  border: 1px solid #ccc;
}
* { box-sizing: border-box; margin: 0; }
<div class="grid-container">
  <div class="item1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt blanditiis facere eius placeat suscipit consequuntur ullam dolor quod tenetur. Nostrum deleniti id temporibus officia, itaque voluptatibus laudantium ad porro.</p></div>
  <div class="item3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>  
  <div class="item4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item5"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

cssgrid

CSS 网格具有不等高和宽的列 的相关文章

  • 我们可以为 border-bottom 属性设置渐变颜色吗？ [复制]

    这个问题在这里已经有答案了 我们可以添加渐变颜色吗border bottomhtml块元素的属性 边框应该与此类似 谁能告诉我这在 CSS3 中是可能的吗 我像这样尝试过 但无法让它工作 border gradient border bot

  • CSS 文本渐变

    我环顾四周 找不到任何与此相关的信息 如果我有一段文本 有没有办法 也许使用 CSS3 来逐渐改变文本的颜色 因为它下降到页面 而不是渐变的方式 因为这只对单词起作用 而不是对整个文本段落起作用 所以我希望一些文本从白色开始 然后在到达段落

  • 样式选项标签[重复]

    这个问题在这里已经有答案了 我有一个包含选项的下拉菜单 我想部分地打破和粗体一些文本以及插入上下文中断 我尝试使用 CSS 和 HTML 标签 但无法得到它 有人可以建议一个解决方案吗 提前致谢 我知道这个问题有点老了 或者至少不是新的 但

  • Chrome 开发工具准确计算 CSS 规则值

    无论如何 例如我可以获取要在 Chrome 开发工具中显示的字体的确切像素值 带小数位 吗 In Firebug 如下 当我定义 value 它显示精确的计算值 以像素为单位 最多 4 位小数 In Chrome 开发工具 如下 它仅显示整

  • 与基线和文本区域垂直对齐

    我试图让标签与文本区域中第一行文本的基线对齐 天真的尝试 div style display inline block div

  • 在视口元标记中设置最小宽度

    我正在设计一个网页 响应式 屏幕的最小宽度应为 480px 我该怎么做 现在我将宽度固定为 480px 这在手机上看起来很完美 但在平板电脑上看起来相当大 对于大屏幕 宽度应该动态变化 我写了一个polyfill来添加min width到视

  • 定位一个没有类或id的div [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 有谁知道当它位于另一个 div 中并且没有 id 或类时 我如何定位一个 div 并设置它的样式 div class wrapper

  • 如何使用 JavaScript 对元素重新排序？

    我如何在不改变 HTML 源代码的情况下重新排序 div 例如 我希望 div 按 div2 div1 div3 的顺序出现 但在 HTML 中它们是 div div div div div div Thanks 没有一种通用的方法可以使用

  • Bootstrap 导航栏不会切换

    我对使用 Bootstrap 相当陌生 并且希望你们中的一位专业人士能够向我展示我在哪里犯了错误 我想要实现的目标 我正在使用 Bootstrap 开发一个响应式网站 我希望我的导航栏固定在顶部 并且当网页缩小到移动尺寸时 我希望我的导航栏

  • 使用 div 模糊其后面的图像？ [复制]

    这个问题在这里已经有答案了 是否可以编写一个 div 使其能够模糊其下方的任何图像 像这样的东西 这可以通过某种方式完成吗 webkit maybe 不能单独使用 CSS 但您可以使用 Canvas 和 StackBlurforCanvas

  • 类内的 CSS @import

    我正在尝试执行以下操作 bootstrap scope import bootstrap min css I know bootstrap min css位于正确的位置 因为放置 import bootstrap min css css页面

  • 基于父 div 的 CSS 优先级

    如果您在浏览器中查看以下代码 该链接将显示为红色 我希望它是绿色的 因为辅助 div 嵌套在主 div 内 看起来颜色是由 css 文件中元素的顺序决定的 如果我在 primary 之后移动 secondary 则链接为绿色

  • Webkit 和 jQuery 可拖动跳跃

    作为实验 我创建了几个 div 并使用 CSS3 旋转它们 items position absolute cursor pointer background FFC400 moz box shadow 0px 0px 2px E39900

  • 通过 JavaScript 传输事件来调用 :hover 伪类

    这是场景 您有两张图像 它们彼此堆叠在一起 最高阶的 z 索引图像负责处理点击事件 想想 Google 的 Map API 并且是透明的 而下面的图像负责视觉表示 这是一个伪 HTML CSS 表示 div visual container

  • Webkit 浏览器在确定表格布局中的单元格宽度时不考虑填充：已修复

    我在申请时得到不同的结果table layout fixed到表格并在单元格上使用填充 IE 和 Firefox 似乎可以通过将单元格宽度和填充加在一起来正常工作 Chrome 和 Safari 仅使用单元格宽度 我看到该问题存在一个错误

  • 使用查询字符串使缓存失效，这是不好的做法吗？

    在我制作的网站上 我通常使用查询字符串参数使 CSS 和 JS 的缓存无效 如下所示 注意 这是 chrome 检查器的屏幕截图 这些查询字符串都是由我在渲染到浏览器中时制作的小系统自动附加的 一位朋友现在告诉我 使用查询字符串的缓存效果不

  • 悬停时用倾斜背景填充元素

    我正在尝试创建一个CSS按钮悬停效果 但我没能用倾斜的形状填充元素 悬停效果是如何规划的 屏幕截图 1 实际看起来如何 屏幕截图 2 我希望悬停效果看起来像斜边 button sliding bg color 31302B backgrou

  • 如何禁用图像上的高亮显示

    I m trying to disable highlight on an image when I drag my mouse over an image it is highlighted Take a look 多谢 Use 用户选择

  • css/html：空格中断修复，现在无法正常编码？

    是的 所以我遇到的问题是 如果你输入一个没有空格的长句子 例如 eeeeeeeeeeeeeeeeeeeeeeeeee 它会自行中断 但现在我需要开始输入一些丑陋的不间断编码 例子 http jsfiddle net r3CFJ http j

  • 表格单元格中文本的垂直对齐方式

    这是我的表格的一部分 它是一个表格 这只是两个 td s in a tr 我想得到描述向上 到表格单元格的顶部 而不是停留在底部 我怎样才能做到这一点 td description vertical align top where desc

随机推荐

热门标签