标签: css-grid
如何在CSS网格布局中设置列的最大宽度？
我想要实现的目标:
使用CSS网格布局,使页面具有正确的列,其大小是从其内容派生的,但最多只能占窗口宽度的20%.
我怎么认为它会起作用:
div {
border-style: solid;
}
#container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: 1fr minmax(auto, 20%);
}<div id="container">
<div>
some content
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin
</div>
</div>它看起来不错,但是当我删除第二个内容时div,左列不会崩溃:
div {
border-style: solid;
}
#container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: 1fr minmax(auto, 20%);
}<div id="container">
<div>
some content
</div>
<div></div> …推荐指数
解决办法
查看次数
使用CSS网格布局跨越所有列/行的项目
随着CSS网格布局模块很快在Firefox和Chrome中出货,我想我会试着掌握如何使用它.
我试图创建一个简单的网格,一个项目a跨越所有行的左侧,与其他项目(b,c,d,e,等)横跨各行的右侧.跨越行的右侧项目的量是可变的,所以有可能是任意组合b,c,d,e,等等,所以我使用的grid-auto-rows财产.因此,我无法定义a跨越的固定行数,但我想a跨越所有可用行.
#container {
display: grid;
grid-auto-flow: column;
grid-auto-rows: auto;
grid-template-columns: [left] 4rem [right] 1fr;
margin: 0rem auto;
max-width: 32rem;
}
#a {
background: lightgreen;
grid-column: left;
grid-row: 1 / auto;
justify-self: center;
}
#b {
grid-area: auto / right;
background: yellow;
}
#c {
grid-area: auto / right;
background: pink;
}
#d { …推荐指数
解决办法
查看次数
使用CSS Grid折叠边框
我很高兴能够了解新的CSS Grid规范,但我遇到了边界问题.
是否有可能在CSS网格中折叠边框,或者是否有任何方法来设置排水沟的样式？
正如您在下面的代码段中看到的那样,10px边框堆叠(20px总计)在块之间.
我知道这个问题并不是CSS网格独有的,但我希望它能够为所有方框和外边缘之间创建统一的10px边框提供新的解决方案.
我的实际用例是我正在使用Grids和React组件进行练习的日历.你可以看到我遇到的问题:
.
由于每个月都不同,我会考虑很多不同的边缘情况.
.container {
display: grid;
grid-template-columns: 120px 120px;
box-sizing: border-box;
}
.block {
width: 100px;
height: 100px;
background-color: lightgrey;
border: 10px solid palegreen;
}
.first {
grid-column: 2 / span 1;
}<div class='container'>
<div class='block first'>1</div>
<div class='block'>2</div>
<div class='block'>3</div>
</div>我很喜欢网格,但谷歌很难找到它!甚至一些关于如何改进我的问题的建议将非常感激.边界正在崩溃吗？内部网格线？
谢谢!
推荐指数
解决办法
查看次数
具有响应方块的网格布局
我想创建一个响应方块的网格布局.
我觉得我应该能够使用CSS网格布局,但无法将每个方块的高度设置为等于宽度.
也难以在每个方格之间设置排水沟.
使用flexbox会更好吗？
目前我的HTML看起来像这样,但是会动态的,所以可以添加更多的正方形.当然,它需要具有响应性,因此最好使用媒体查询将其折叠为一列.
<div class="square-container">
<div class="square">
<div class="content">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
</div>
使用css网格,这是我得到的
.square-container{
display: grid;
grid-template-columns: 30% 30% 30%;
.square {
}
}
我能够进一步使用flexbox并且能够使用间隔来将正方形与一个漂亮的排水沟对齐,但仍然在努力使高度与每个正方形的宽度相匹配.
我无法找到任何与flexbox或网格相关的示例,但任何示例都将受到赞赏.
谢谢
推荐指数
解决办法
查看次数
制作一个拖动栏来调整CSS网格中的div
我在一个独特的容器div(下面的代码和小提琴)中有2个盒子和一个垂直div线.
我正在使用CSS网格将我的元素放在容器中
我想要完成的是使用垂直线根据垂直线的位置水平调整两个框的大小.
我很抱歉,如果问题是noobish,我是网络开发的新手,之前只使用过Python,已经尝试过google和stackoverflow搜索,但所有解决方案看起来都过于复杂,而且通常需要额外的库,我只是寻找更简单的东西和JS.
HTML:
<div class="wrapper">
<div class="box a">A</div>
<div class="handler"></div>
<div class="box b">B</div>
</div>
CSS:
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-template-columns: 200px 8px 200px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
resize: both;
}
.handler{
width: 3px;
height: 100%;
padding: 0px 0;
top: 0;
background: red;
draggable: true;
}
推荐指数
解决办法
查看次数
防止CSS网格中的双边框
鉴于当前的CSS网格示例,我如何折叠边框以避免双边框？
使用Html表实现这是一件非常简单的事情.我该怎么做display: grid？
.wrapper {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
}
.wrapper > div {
padding: 15px;
text-align: center;
border: 1px solid black;
}<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>推荐指数
解决办法
查看次数
CSS Grid - 自动高度行,调整内容大小
我有两个嵌套在网格中的网格.不幸的是,右侧嵌套网格.grid-3设置了行的高度,因此左右网格都是相同的高度,额外的空间在具有类的div之间共享.right.如何设置右嵌套网格的行以调整内容的大小,因此它们与左嵌套行的高度相同？
div {
border: 1px dotted black;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows auto;
}
.grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows auto;
}
.left {
background-color: red;
}
.right {
background-color: green;
}<div class="grid-2">
<div class="grid-2">
<div class="left">L</div>
<div class="left">L</div>
<div class="left">L</div>
<div class="left">L</div>
<div class="left">L</div>
<div class="left">L</div>
<div class="left">L</div>
<div class="left">L</div>
<div class="left">L</div>
<div class="left">L</div>
<div class="left">L</div>
<div class="left">L</div>
<div class="left">L</div>
<div class="left">L</div>
<div class="left">L</div>
<div class="left">L</div>
<div …推荐指数
解决办法
查看次数
是否允许<button>显示:grid？
或者,更一般地说,是否有任何无法设计的元素display:grid？
考虑:
button,
div {
display: grid;
grid-template-columns: 50px 50px;
}
/* Nevermind these, they're just for a consistent display */
button,
div {
border: 0;
background-color: gray;
color: black;
width: 100px;
text-align: center;
font-family: sans-serif;
font-size: 14px;
padding: 0;
}Button:
<button>
<span>A</span>
<span>B</span>
</button>
<br>
Div:
<div>
<span>A</span>
<span>B</span>
</div>这是Firefox(61.0.1)中的结果:
这是Chrome(68.0.3440.106)中的结果:
Chrome似乎不喜欢我正在尝试使用display:grid按钮.这只是一个错误吗？或者是以某种方式打算？
推荐指数
解决办法
查看次数
如何在柔性容器中设置间隙（排水沟）？
我正在尝试创建某种柔性容器的通用组件。该组件由容器及其连续的子组件组成。
如果一行中的孩子太多，没有足够空间的孩子会去第二行。它可以使用 Flexbox 轻松实现，但我也希望能够在元素之间设置装订线。一行的第一个和最后一个元素不应分别具有左边距和右边距。
我使用负边距技术来做到这一点，但这里的问题是，如果容器太大，右边距可能会引发溢出问题。我可以通过添加切断负边距来解决这个问题overflow: hidden，但它会引发容器内项目溢出的问题（下拉菜单等）。
所以现在我正在寻找银弹，可以满足这个要求的实现：
- 连续有多个项目。项目的宽度可以不同。
- 如果某些项目没有足够的空间，则会转到下一行。
- 项目之间有间隙（边距），第一个和最后一个项目分别没有左边距和右边距。
- 容器内部可以放置溢出的内容（下拉菜单），所以我无法使用
overflow: hidden - 可以使用CSS grid和flexbox
这是我对这个问题的解决方案： https://jsbin.com/gabumax
这里是示例中的代码：
.container {
overflow: hidden;
}
.wrapper {
margin: -10px;
display: flex;
flex-wrap: wrap;
}
.item {
flex: 0 0 auto;
padding: 10px;
background-color: red;
margin: 10px;
}<div class="container">
<div class="wrapper">
<div class="item">Width of items can vary</div>
<div class="item">This example works</div>
<div class="item">But there is a problem</div>
<div class="item">Dye to overlow:hidden</div>
<div class="item">It is impossible to place here</div>
<div class="item">Overflowing …推荐指数
解决办法
查看次数
Account for gap when calculating flex-basis
I'm trying to use gap to specify gaps between flexed items within my grid system, but running in to a major drawback. It seems that when you're using flex-grow: 0;/flex-shrink: 0; in conjunction with gap and flex-basis values that fill the entire available width (i.e. three columns with flex: 0 0 33.3333%;), the columns overflow their parent container as the gap doesn't account for the fixed width as specified with flex: 0 0 33.3333%.
Similar to …
推荐指数
解决办法
查看次数