标签: css-grid
CSS网格布局中百分比和fr单位之间的差异
我正在玩CSS网格布局,并遇到了一个我无法找到答案的问题.
请考虑以下示例:
:root {
--grid-columns: 12;
--column-gap: 10px;
--row-gap: 10px;
}
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), calc(100% / var(--grid-columns)));
grid-column-gap: var(--column-gap);
grid-row-gap: var(--row-gap);
justify-content: center;
}
[class*=l-] {
border: 1px solid red;
}
.l-1 {
grid-column-start: span 1;
}
.l-2 {
grid-column-start: span 2;
}
.l-3 {
grid-column-start: span 3;
}
.l-4 {
grid-column-start: span 4;
}
.l-5 {
grid-column-start: span 5;
}
.l-6 {
grid-column-start: span 6;
}
.l-7 {
grid-column-start: span 7;
}
.l-8 {
grid-column-start: span …推荐指数
解决办法
查看次数
如何为所有行重复网格模板行
我正在尝试为我的网格块中的行创建模板:
grid-template-rows: repeat(3, 150px);
我知道,这个模板应该适用于前3行.但是,从4行开始,这个模板不起作用.
我可以为所有行制作模板吗？
PS此模板仅适用于第1行.
grid-template-rows: 150px;
推荐指数
解决办法
查看次数
获取要在CSS Grid中包装的列
如何在使用时指定最大列数,当display: grid;内容对于空间来说太宽(或小于最小大小)时它会自动断开？有没有办法在没有媒体查询的情况下做到这一点？
例如,我有以下内容,当内容空间不足时,不会分成单列模式.
#grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1em;
}
#grid > div {
background-color: #ccddaa;
}<div id="grid">
<div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text …推荐指数
解决办法
查看次数
如何使用CSS Grid布局粘贴页脚？
我在CSS Grid布局中找到了一个粘性页脚的CodePen解决方案,但它对我来说有两个问题:
- 这是有点丑
min-height: 100%和height: 100% - 它只适用于身体中的两个元素(div和footer)
我需要一些适用于这种HTML结构的东西:
<body>
<nav>Some navigation buttons</nav>
<main>The content</main>
<footer>Copyrights and stuff</footer>
</body>
我真的不想收拾<nav>和<main>成<div>,我就喜欢这样做纯CSS.
// Not required!
// This is just to demo functionality.
$("#add").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris …推荐指数
解决办法
查看次数
如何使 div 高度等于 CSS 网格中的宽度
我正在使用 CSS Grid 来布局缩略图库，没有使用 Javascript 或任何其他响应式技术。我想将缩略图的高度设置为其宽度 (1:1) 平方比。
为什么？当页面加载时，我需要缩略图 div 来占用空间，因为现在如果缩略图 div 中没有图像，它就不会占用任何空间。
这是一个实时示例：https : //www.w3schools.com/code/tryit.asp?filename=FMCULIDQUOBX
这是代码：
.container {max-width: 900px;}
.gallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 15px;
}
.thumbnail {box-shadow: 0 4px 4px rgba(0,0,0,0.50);}
img {width: 100%; display: block;}
……………………………………………………………………………………………………………………………………………………………………………………………………
<div class="container">
<div class="gallery">
<div class="thumbnail">
<a href="large-image.jpg">
<img src="thumbnail-image.jpg">
</a>
</div>
<div class="thumbnail">
...... same as above ......
</div>
<div class="thumbnail">
...... same as above ......
</div>
<div class="thumbnail">
...... same as above ...... …推荐指数
解决办法
查看次数
响应式CSS网格布局,位置:固定
我正在使用CSS网格布局构建一个响应式模板(仍然在学习),感谢你们中的一些人,我已经完成了大部分工作.
移动(最大宽度:767px)
- 一切都应该出现在自己的行上
平板电脑(最小宽度:768px)
- nav在第一行
- 在第二个和第二个主要
桌面(最小宽度:992px)
- 与平板电脑相同,但水平间距为10%
xl桌面(最小宽度:1920px)
- 与桌面相同,但最大宽度为1920px
问题是我正在使用header标签来为左边和右边的间距着色nav.无论我使用标头还是div,只是为空着色空间着色空容器似乎不对.有没有办法让我position: fixed在整个顶部应用？
* {
margin: 0;
padding: 0;
}
body {
display: grid;
font-family: sans-serif;
}
a {
text-decoration: none;
color: white;
}
header,
nav {
background: blue;
color: #fff;
}
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
}
nav span {
margin-right: auto;
}
header {
display: none;
}
aside {
background: lightgreen;
}
main {
background: pink;
}
/* mobile */ …推荐指数
解决办法
查看次数
<fieldset>上的网格布局... Chrome上的错误？
从我几十年来手工编码HTML的经验来看,我已经了解到<form>,<fieldset>这些只是一些block级别的元素<div>.从CSS的角度来看,它们在定位和尺寸方面的表现相同.(请耐心等待,我在这里忽略像IE6这样的老浏览器.)....或者我认为....
*在我继续之前,我必须声明我在大多数时间使用Firefox进行开发和测试.
我参加了一个有很多<form>和<fieldset>整个地方的项目.为了简化我的问题,我有类似的东西:
<form>
<fieldset>
<div class="gridChild">...</div>
<div class="gridChild">...</div>
<div class="gridChild">...</div>
</fieldset>
</form>
我想让gridChild divs在各个列的布局中.所以我有CSS的东西:
fieldset {
display: grid;
grid-template-columns: 50px 2fr 6fr 6fr auto ....;
}
它奏效了.它在我的屏幕上完美显示了这些列...它适用于Firefox,Android甚至Edge.截止日期已逾期.我很匆忙,我没有在Chrome上测试它.我认为如果Firefox和Edge工作正常,那么Chrome也应该工作,对吧？或者我认为......后来,我发现这对Chrome无效.Chrome上的网格布局完全被忽略.我花了几天时间来调试问题.
经过几个不眠之夜,我发现这display:grid不起作用<fieldset>.它必须应用于<div>Chrome才能运行.这对我来说是惊喜,因为我一直在做这么多的CSS定位,就像漂浮,绝对定位等在跨浏览器的方式<form>,并<fieldset>和他们一直表现得就像<div>所有的时间.但为什么不进行网格布局呢？这是Chrome的错误,还是这种行为设计得像那样？因为我发现这不是Firefox,Edge和Android的问题.
我能想到的一个简单的解决方法是包装<div>内部<fieldset>,如下所示:
<form>
<fieldset><div class="gridParent">
<div class="gridChild">...</div>
<div class="gridChild">...</div>
<div class="gridChild">...</div>
</div></fieldset>
</form>
但正如我之前说的,我已经<form>和<fieldset>所有的地方.如果我可以避免更改HTML结构,那将是最好的.我写这篇文章是为了寻找一个CSS解决方案/ hack,所以我不必重复编写数百条HTML行.
推荐指数
解决办法
查看次数
使用CSS Grid设置最小和最大列数
我有10个div(64px x 64px),我希望最多显示5列(适用于大视口和超大视口),最少3列(适用于iPhone 7等小视口).
我试图用CSS Grid做到这一点,但不能做最小列部分(即使有空间来容纳3个col,它也会变为2列).
body {
background-color: wheat;
}
.parent {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(100px, 140px));
max-width: 800px;
}
.child {
height: 64px;
width: 64px;
background-color: brown;
}<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>网格容器的最大宽度为800px.
这是Codepen的链接
编辑:如果可能,我想只使用CSS Grid完成此操作,即不使用Media Queries或Flexbox.
推荐指数
解决办法
查看次数
CSS网格单元的高度不同
如何向上移动"内容"和"右"块响应？问题是我无法使用子嵌套网格.我不需要hacks:没有margin-top因为header可以是不同的高度.没有javascript.只有纯CSS.如果可能的话.
现在我的标记看起来像这样:
.wrapper {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
"aside header header"
"left content right";
grid-gap: 15px;
}
.header, .aside, .left, .content, .right {
border: 1px solid black;
padding: 10px;
}
.header {
grid-area: header;
height: 30px; /* in real case it's responsive height */
}
.aside {
grid-area: aside;
height: 80px; /* in real case it's responsive height */
}
.left {
grid-area: left;
}
.content {
grid-area: content;
background: yellow;
}
.right …推荐指数
解决办法
查看次数
为什么具有网格区域名称但未在grid-template-area中定义的网格项目会创建附加列？
我创建了一个简单的CSS网格，我决定不指定grid-template，grid-template-columns，grid-template-rows的属性。
相反，我从开始grid-template-areas，并通过属性将区域名称分配给了网格项grid-area。
之后，我对如果从中删除grid-item会发生什么感兴趣grid-template-areas。结果有点奇怪。
删除的网格项目位于右侧，并由其他列分隔。
问题：
为什么会这样呢？这是预期的行为还是我的代码中遗漏了某些东西？如何删除此列？
body {
display: grid;
grid-template-areas:
"header"
"footer";
}
header {
grid-area: header;
background: lightblue;
}
main {
grid-area: main;
background: darkorange;
}
footer {
grid-area: footer;
background: blue;
}<header>Header</header>
<main>Main</main>
<footer>Footer</footer>推荐指数
解决办法
查看次数