标签: css-grid
带有flexbox布局的大型第一项？
我有一个布局,包含一个包含一堆项目的有序列表.
所有项目都具有一致的宽度和高度 - 除了第一项 - 宽(3x)和(2x)更高.它看起来像这样:
ol {
padding:0;
margin:0;
min-width: 488px;
}
li {
list-style: none;
width: 150px;
padding-bottom: 16.66%;
border: 5px solid tomato;
display: inline-block;
}
li:first-child {
float:left;
width: 478px;
border-color: green;
padding-bottom: 34.25%;
margin: 0 4px 4px 0;
}<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>Codepen演示(调整视口大小以查看效果)
目前,我正在使用浮动和内联块来实现布局,但我想使用flexbox,因为flexbox提供了一些额外的功能.
我做了几次尝试,但没有成功 -
尝试#1 - Codepen
ol {
/* ... */
display: flex;
flex-wrap: …推荐指数
解决办法
查看次数
具有列顺序的响应式多列列表
我正在尝试创建一个有序的多列列表,但我正在努力与CSS网格布局规则.
期望的结果应该是敏感的.在小屏幕上2个网格列,在大屏幕上最多4个,同时保持列顺序.
而不是像这样订购:
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15
他们应该像这样订购:
1 5 9 13
2 6 10 14
3 7 11 15
4 8 12
我觉得我很接近这个小提琴.
ol {
margin: 0;
padding: 0;
list-style: none;
background-color: grey;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(33.333%, 50%));
grid-auto-flow: column;
grid-template-rows: repeat(5, 1em);
}
li {
outline: 1px solid orange;
}<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item …推荐指数
解决办法
查看次数
垂直和水平居中网格容器
令人惊讶的是,我无法在网上找到任何相关信息.也许我错过了什么.如何使用CSS Grid水平和垂直地将整个主包装器中心放置,显然,保持响应性？
.wrapper {
display: grid;
grid-template-columns: minmax(100vw, 1fr);
grid-template-rows: minmax(100vh, 1fr);
align-items: center;
justify-content: center;
}<div class="wrapper">
<div class="centerthis">loremloremlorem</div>
</div>使用上面的CSS,它div是垂直居中,但不是水平居中.
以下CSS将div水平居中,但不是垂直居中:
.maingrid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-items: center;
justify-content: center;
}
.centerthis {
align-self: center;
justify-self: center;
}<div class="maingrid">
<div class="centerthis">loremloremlorem</div>
</div>推荐指数
解决办法
查看次数
在单个CSS网格行上设置高度值
我有一个CSS网格布局,我使用该grid-column属性跨越整个网格的顶行.
有谁知道如何将此行设置为100px高并将所有后续行设置为grid-auto-rows200px 的高度？
我知道我可以输入grid-template-rows所有特定行的单个值,但页面上会有很多div,并且不想输入100px,然后使用此grid-template-rows属性输入200px的值.
我认为必须有一种方法可以在某些行上设置单个像素值,然后将其他所有内容设置为grid-auto-rows？
我似乎无法在文档中找到如何做到这一点.
任何帮助都是极好的!
https://codepen.io/emilychews/pen/dZPJGQ
.gridwrapper {
display: grid;
grid-template-columns: repeat(2, 2fr);
grid-auto-rows: 200px;
grid-template-rows: 100px 200px;
grid-gap: 10px;
}
nav {
background: yellow;
}
.gridwrapper div {
padding: 1em;
background: red;
color: white;
box-sizing: border-box;
}
.gridwrapper div:nth-child(odd) {
background: blue;
}
nav {
grid-column: 1 / -1;
}
/*MAKE DIVS 1FR ON MOBILE*/
@media only screen and (max-width: 736px) {
.gridwrapper {
grid-template-columns: 1fr;
} …推荐指数
解决办法
查看次数
CSS Grid中的行应该占用剩余空间
我有一个非常简单的CSS网格,只有两行:a header和a div.我希望第二行占用所有剩余的视口高度.这是一个复制品:
html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }
body {
display: grid;
height: 100vh;
width: 100vw;
}
header {
border: 1px solid red;
}
.content {
border: 1px solid blue;
}<header>
<h1>IMG + Some header text</h1>
</header>
<div class="content">
Here will be dynamic content (a grid on its own).
Should take all the remaining height.
</div>这使用了太多的空间header.我希望它最多占用尽可能多的空间,使其内容不会溢出.
我怎样才能做到这一点？
我对任何基于规格的解决方案感兴趣,但实际上我希望能够至少在Chrome(或Firefox)最新的稳定版本中使用它.
推荐指数
解决办法
查看次数
Angular 5和CSS Grid - 无法找到网格区域 - 警告
我使用CLI创建了一个新的Angular 5.2项目(例如ng new MyApp)
更改到文件夹并运行应用程序工作正常.(例如ng服务)
我对生成的代码进行了以下更改(见下文).只有HTML和CSS代码更改,非常小,我发布的是整个更改.
当我保存代码时,它会重新编译,并抛出警告:
ErrorEmittedError :(发出的值而不是Error的实例)autoprefixer:D:\ MyApp\src\app\app.component.css:51:7:找不到网格区域:标题,导航,内容,侧边栏,广告,页脚
该错误似乎与CSS的媒体查询部分有关.如果我删除该部分,则错误消失.
我不记得在Angular 4.x中发生过这种情况吗？有什么想法发生了什么？
app.component.html
<div class="wrapper">
<header class="main-head">The header</header>
<nav class="main-nav">
<ul>
<li><a href="">Nav 1</a></li>
<li><a href="">Nav 2</a></li>
<li><a href="">Nav 3</a></li>
</ul>
</nav>
<article class="content">
<h1>Main article area</h1>
<p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on …推荐指数
解决办法
查看次数
CSS Grid在特定元素上的行/列间隙？
我使用CSS Grid在下面创建了网格，我想知道是否有可能仅在网格内的特定元素之间存在间隙，而不是对所有网格元素都应用通用间隙。这是我现在所拥有的：
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: [col] 100px [col] 100px [col] 100px;
grid-template-rows: [row] auto [row] auto [row] ;
background-color: #fff;
color: #444;
}
.box {
background-color:#444;
color:#fff;
padding:20px;
font-size:150%;
}
.a {
grid-column: col / span 2;
grid-row: row 1 / 3;
}
.b {
grid-column: col 3 / span 1;
grid-row: row ;
}
.c {
grid-column: col 3 / span 1;
grid-row: row 2 ;
}
.d {
grid-column: …推荐指数
解决办法
查看次数
整个CSS GRID行的水平边框
我需要使用网格布局,但也需要一条水平线来分隔每一行.
我唯一能找到的就是为每个单元格应用边框,但这只有在有足够的单元格填充每一行时才有效.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
}
.box {
border-bottom: 2px solid #ffa94d;
padding: 1em;
}<div class="wrapper">
<div class="box">One</div>
<div class="box">Two</div>
<div class="box">Three</div>
<div class="box">Four</div>
</div>有没有办法解决上述问题,以便整行有边框？
推荐指数
解决办法
查看次数
为什么背景颜色不能用于内联网格
我创建了两个div; 一个display:inline-grid有财产,另一个display:grid有财产.我想将背景颜色应用于两个div的子元素,但具有display:inline-grid属性的div 不会对其元素着色.
HTML和CSS代码
#inline {
display: inline-grid;
}
#block {
display: grid;
}
div div {
height: 50px;
}
div div:nth-child(1n) {
background-color: green;
}
div div:nth-child(2n) {
background-color: rebeccapurple;
}
div div:nth-child(3n) {
background-color: aquamarine;
}<body>
<div id="inline">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="block">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>输出是:
如何为内联网格div中的div设置颜色？
推荐指数
解决办法
查看次数
无法在div上应用动态高度-时间轴视图
我正在尝试建立水平时间表。一个月中的任何一天都有很多事件。
因此，当事件更多时，列表项将无法容纳可用高度（来自min-height：），并且出现垂直滚动。
如果我尝试删除min-height整个内容，则会失真。我希望容器在不垂直滚动的情况下占用任何数量的项目。
另外，还有一个问题，当窗口较小时（在Codepen上可以看到），出现水平滚动（预期和需要）。但是，连接器没有占据整个滚动宽度。
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.timeline__container {
background: #c0ffee;
overflow-x: auto;
display: flex;
position: relative;
}
.timeline__connector {
position: absolute;
width: 100%;
left: 0;
top: calc(50% - 4px);
height: 8px;
background: #ccc;
}
.timeline__item {
background: gold;
min-width: 85px;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.timeline__item:nth-child(2n) {
flex-direction: column-reverse;
}
.timeline__up {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.timeline__down { …推荐指数
解决办法
查看次数
标签 统计
css ×10
css-grid ×10
css3 ×7
html ×4
flexbox ×2
grid ×2
angular5 ×1
autoprefixer ×1
css-tables ×1