标签: css-grid
vs CSS Grid和CSS Modules的代码和intellisense
我正在使用CSS代码来使用CSS Grid和CSS Modules进行项目.但是,当我尝试这样的事情
.loginRegisterDiv {
composes: loginDiv;
margin: 0px;
width: 100%;
}
我收到一个错误,说组成了"未知属性".另外我使用的是css网格,在VS代码中似乎没有任何intellisense.我需要安装扩展程序吗？
我正在使用rallycoding规则集.
推荐指数
解决办法
查看次数
CSS打印页面 - 中断 - 不使用CSS网格布局
我正在使用gridbyexample.com定义的新CSS3布局技术.除非我尝试打印布局,否则它的效果非常好.Chrome和Firefox似乎忽略了我在CSS中定义的任何分页符和横向视图模式.我的项目有一个代码笔,但它似乎改变了它在打印预览模式下的外观,因此它只适用于查看HTML和CSS,但不适用于打印的外观. https://codepen.io/JeffreySpring/pen/rzjeKm
我创建了一个.zip文件,其中包含可从https://drive.google.com/open?id=0B0LdH-fKpAKeY0NRa290M25uTGc下载的所有文件和图像
这是HTML
<!DOCTYPE html>
<html>
<head>
<title>Steam Controller Bindings Template</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body cz-shortcut-listen="true" style="">
<ul class="wrapper">
<li class="device">
<div id="steamDeviceContainer">
<div><h1>Couch Gamer's Witcher 3 Bindings</h1></div>
<img src="img/steam_controller.png" alt="Steam Controller">
</div>
<div class="mappingGyroShift1">
<h3 class="mappingHeader gyroShift1">Gyro<span class="boundTo gyroShift1">(Mouse Joystick)</span></h3>
<div class="actionBind gyroShift1">Precision Crossbow/Bomb Aim</div>
</div>
</li>
<li>
<div class="mapping">
<h3 class="mappingHeader">Left Trigger</h3>
<div class="actionBind">Use Witcher Senses</div>
<div class="actionBind">Block or Counterattack</div>
</div>
<div class="mapping">
<h3 class="mappingHeader">Left Bumper</h3>
<div class="actionBind">Quick choice menu</div>
</div>
<div class="mapping"> …推荐指数
解决办法
查看次数
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 …推荐指数
解决办法
查看次数
使网格列跨越整行
想象一下,我们有2个CSS Grid容器,其动态列数基于宽度计算.
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
网格工作得很好,但如果我们需要另一个网格使第一列与上面显示的代码的另一个网格相同,但是它是另一个跨越更多单元格的列 - 取决于有多少单元格在当前行.
为了更好地理解问题,有图像:
在更窄的包装上:
我们需要应用类似的东西grid-column: span ALL (如果存在这样的东西),意味着ALL =直到当前行的结尾.
真正重要的是"First"列应始终与"1"列对齐.
代码运行示例如下:
.grid div {
/* Not important fancy styles */
height: 40px;
text-align: center;
padding-top: 20px;
}
.grid {
width: 350px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
background-color: silver;
}
.grid-second {
background-color: red;
}
.grid-another {
background-color: purple;
border: 1px solid gray;
}<div class="grid">
<div class="grid-first">
First
</div>
<div class="grid-second">
Second …推荐指数
解决办法
查看次数
在CSS Grid中为网格间隙设置不同的长度
我正在使用CSS网格创建一个布局,我希望每行之间有不同的空间.
我可以通过在每个元素上使用margin来创建布局,但这种模糊了代码的简单性.有没有我可以做到的网格技巧,grid-row-gap只看到一个值,它用于所有行.
我想要实现的是这样的布局:
https://jsfiddle.net/8swzgk0b/1/
.grid {
display: grid;
grid-template-columns: auto 25% 25%;
grid-template-rows: auto auto auto;
width 100%;
margin: 20px;
grid-column-gap: 40px;
/* grid-row-gap: 40px 60px; */
}
div {
background: #838383;
height: 80px;
}
.wide {
grid-column: 1 / span 3;
margin-bottom: 5px;
}
.row-2 {
background: green;
margin-bottom: 10px;
}
.row-3 {
background: blue;
margin-bottom: 30px;
}
.row-4 {
background: red;
margin-bottom: 20px;
}<div class="grid">
<div class="wide"></div>
<div class="row-2"></div>
<div class="row-2"></div>
<div class="row-2"></div>
<div class="row-3"></div> …推荐指数
解决办法
查看次数
为什么网格间隙会导致溢出？
为什么我在以下代码段中的X轴上有溢出？
一旦我grid-gap: 10px在.body网格容器上应用溢出就会生成.
div:not(.header):not(.body):not(.row) {
border: 1px solid grey;
}
.header {
margin-top: 20px;
display: grid;
grid-gap: 10px;
grid-template-areas: "header-left header-right-up" "header-left header-right-down";
grid-template-rows: 40px 40px;
grid-template-columns: minmax(50px, 200px) auto;
}
.header-left {
grid-area: header-left;
}
.header-right-up {
grid-area: header-right-up;
}
.header-right-down {
grid-area: header-right-down;
}
.body {
margin-top: 20px;
display: grid;
grid-template-columns: 25% 50% 25%;
grid-auto-rows: 80px;
grid-gap: 10px;
}
.row-left {
}
.row-center {
}
.row-right {
}<div class="header">
<div class="header-left">image</div>
<div class="header-right-up">content</div> …推荐指数
解决办法
查看次数
css网格项上的粘性位置
我在这里看了其他的例子,但找不到一个让这个工作.我希望在页面滚动时侧边栏(部分)是粘性的.位置:粘贴有效,如果我把它放在导航,所以我的浏览器def支持它.
main {
display: grid;
grid-template-columns: 20% 55% 25%;
grid-template-rows: 55px 1fr;
}
nav {
background: blue;
grid-row: 1;
grid-column: 1 / 4;
}
section {
background: grey;
grid-column: 1 / 2;
grid-row: 2;
position: sticky;
top: 0;
left: 0;
}
article {
background: yellow;
grid-column: 2 / 4;
}
article p {
padding-bottom: 1500px;
}<main>
<nav></nav>
<section>
hi
</section>
<article>
<p>hi</p>
</article>
</main>推荐指数
解决办法
查看次数
为什么具有网格区域名称但未在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>推荐指数
解决办法
查看次数
网格模板区域 - 属性值无效
我尝试搜索 Stack Overflow、mozilla 文档和 CSS 技巧来找出为什么我的 grid-template-areas 总是收到无效的属性值，但无法弄清楚。有人可以指出为什么我收到此错误消息以及我做错了什么吗？
我正在尝试创建一个计算器。为此，我尝试创建网格单元以将运算符和关键数字输入其中。
提前致谢。
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
#gridContainer {
border: 1px solid black;
display: grid;
grid-template-columns: 4rem 4rem 4rem 4rem;
grid-template-rows: 6rem 6rem 6rem 6rem 6rem 6rem;
grid-template-areas:
"s s s s"
"o o o o"
"n n n o"
"n n n o"
"n n n o"
"z z d c";
}<html>
<body>
<div id="gridContainer"> …推荐指数
解决办法
查看次数
文本未包装在CSS网格中
我一直在尝试使用CSS Grid,并坚持找到最有效的方法,让文本环绕一个<div>元素,该元素部分位于另外两个<div/>元素之上.基本上,就像在下面的图像中,我希望红色和蓝色div中的文本环绕黄色div,该黄色div部分位于其他两个元素的列和行中.显然,这是一个基于网格的布局,所以我对使用典型的浮点数做这件事并不感兴趣.如何使用CSS Grid实现此效果？
这是我的CSS和HTML:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
}
.red {
background-color: red;
grid-column: 1 / span 2;
grid-row: 1 / span 4;
}
.blue {
background-color: blue;
grid-column: 3 / span 2;
grid-row: 1 / span 4;
}
.yellow {
background-color: yellow;
grid-column: 2 / span 2;
grid-row: 2 / 4;
}<div class="grid">
<div class="red">According to the Oxford English Dictionary, hello is …推荐指数
解决办法
查看次数
标签 统计
css ×10
css-grid ×10
css3 ×6
html ×3
css-modules ×1
css-position ×1
grid ×1
intellisense ×1
page-break ×1