我正在尝试使用CSS Grid创建一个简单的页面.
我没有做的是将文本从HTML中心放到相应的网格单元格中.
我已经尝试在内容和选择器的div内部和外部放置内容,并且使用某些CSS属性无济于事.left_bgright_bg
我该怎么做呢？
html,
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100vh;
grid-gap: 0px 0px;
}
.left_bg {
display: subgrid;
background-color: #3498db;
grid-column: 1 / 1;
grid-row: 1 / 1;
z-index: 0;
}
.right_bg {
display: subgrid;
background-color: #ecf0f1;
grid-column: 2 / 2;
grid_row: 1 / 1;
z-index: 0;
}
.left_text {
grid-column: 1 / 1;
grid-row: 1 / 1;
position: relative;
z-index: 1;
justify-self: center; …我在创建一个flexbox响应网格时遇到了问题,并希望有人可以指出我正确的方向.
我希望所有的.blockdiv都是相同的高度,并且.bottomdiv绝对位于底部.这实际上是在当前的解决方案中工作,但是当h2标题太长并且达到2 h2行时,我希望行的所有标题都是相同的高度.
这有可能吗？
我做了一个Codepen来说明问题:http://codepen.io/kenvdbroek/pen/eZKdEQ
h1,
h2,
h3 {
margin: 0;
}
body {
margin: 0;
padding: 0;
}
ul.clean-list {
margin: 0;
padding: 0;
}
ul.clean-list li {
list-style: none;
margin-bottom: 5px;
}
li:last-child {
margin-bottom: 0;
}
.container {
padding-top: 50px;
}
.block {
margin-bottom: 30px;
border: 1px solid red;
}
.block > .bottom {
border: 1px solid blue;
}
@media only screen and (min-width: 480px) { …我正在使用一个非常简单的布局的页面 - 基本上是一个数据表,但使用网格布局,以便列将根据内容大小很好地调整.我想使行可排序(使用jQuery),所以我需要找到一种方法来包装容器中同一行的所有单元格.
display: subgrid;
我尝试过使用subgrid,但目前似乎没有太多支持..显然,只是嵌套网格不起作用,因为它不会同步不同网格之间的列大小.
有关如何实现这一点的任何想法？
到目前为止,这是我的笔:https://codepen.io/anon/pen/PEjqgx
我从一个应该是两列宽的对象生成一个表（使用 vue.js）。每一列都来自对象的键和值。这等效于以下实际的 HTML：
<div id="table">
<div>
<div>
this is something long on the first row
</div>
<div>
short 1st row
</div>
</div>
<div>
<div>
wazaa 2nd row
</div>
<div>
wazii 2nd row
</div>
</div>
</div>
我使用 CSS 网格将它们格式化div为 2x2 网格，我希望是
this is something long on the first row | short 1st row
wazaa 2nd row | wazii 2nd row
执行此操作的代码：
<div id="table">
<div>
<div>
this is something long on the first row
</div>
<div>
short 1st row
</div> …我希望一个项目从第一列开始并在最后一列结束，无论有多少列。
它应该像这样工作：
item {
grid-column-start: 1;
grid-column-end: -1;
}
将第 n 条网格线添加到网格项的位置。如果给出负整数，则相反，从显式网格的结束边缘开始计数。
所以这只适用于显式网格？为什么它不能在隐式网格上工作？
我正在尝试使用CSS网格布局来模拟一些响应行为,特别是:
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
我的示例https://codepen.io/elgs/pen/goNxeL在Chrome中运行良好,但它似乎在Firefox中不起作用.您可以在水平调整浏览器大小时找到它.
另一个示例https://codepen.io/elgs/pen/YYoxOq适用于Chrome和Firefox.
html,body {
height: 100%;
width: 100%;
margin: 0 auto;
padding: 0;
}
body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px 1fr 50px;
}
.header {
grid-column: 1/2;
grid-row: 1/2;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: #57324f;
}
.header .title {
grid-column: 1/2;
grid-row: 1/2;
align-self: center;
justify-self: center;
width: 100%;
max-width: 1000px;
color: aliceblue;
}
.footer {
grid-column: 1/2;
grid-row: 3/4;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: …我有一个简单的 Flex 元素和一些子元素，如下所示：
.container{
display: flex;
flex-wrap: wrap;
}
.container div.flex-box{
width: 200px;
margin: 20px;
padding: 20px;
font-size: 40px;
border: 1px solid;
}<div class='container'>
<div class='flex-box'>one</div>
<div class='flex-box'>two</div>
<div class='flex-box'>three</div>
<div class='flex-box'>four</div>
<div class='flex-box'>five</div>
<div class='flex-box'>six</div>
</div>我使用的是柔性包装，所以当屏幕变小时，它们会堆叠起来。
现在，我想使用 ajax 调用重新加载第四个和第五个元素来重新加载这两个元素，为此我需要将两个子元素放入容器中，但是当我这样做时，它会变成一个新的 Flex 子元素
.container{
display: flex;
flex-wrap: wrap;
}
.container div.flex-box{
width: 200px;
margin: 20px;
padding: 20px;
font-size: 40px;
border: 1px solid;
}<div class='container'>
<div class='flex-box'>one</div>
<div class='flex-box'>two</div>
<div class='flex-box'>three</div>
<div class='subcontainer'>
<div class='flex-box'>four</div>
<div class='flex-box'>five</div>
</div>
<div …我正在尝试使用组件驱动的前端框架（例如Angular），最后学习CSS Grid。
我的问题是：筑巢 是坏习惯CSS Grids吗？
我在这里所做的是在我的main / root组件中，我使用了CSS网格来完成两件事：navbar和主要内容区域，因为navbar将出现在整个应用程序以及主要内容中。
如下所示，根层次上的网格，然后是<nav-bar>组件中的另一个网格。在主要内容区域中，我使用的每个/任何Angular组件中都会有更多的网格，可能是网格。
********************** ******************************
* Navbar * => * img | nav | logout *
********************** ******************************
**********************
* *
* Content *
* *
**********************
下面的示例代码：
app.component.html
<div class="container">
<div class="item-navbar"></div>
<div class="item-nav">
<nav-bar></nav-bar>
</div>
<div class="item-content">
<router-outlet></router-outlet>
</div>
</div>
With this CSS:
.container {
display: grid;
grid: ". nav ."
". content ."
/ 3vh auto 3vh;
row-gap: 1vh;
}
.item-navbar {
grid-area: 1 / …我正在尝试将嵌套li(ul li ul li)放置在最顶层创建的CSS网格上ul.没有爱(它没有用).也许这是不可能的,或者我错过了什么？
#orgChart ul.orgChartLevel1 {
display: grid;
grid-template-columns: 12px auto;
grid-template-rows: 100px auto auto;
grid-row-gap: 30px;
}
#orgChart li.orgChartLevel2b {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}<ul class="orgChartLevel1">
<li class="orgChartLevel1a">
<ul class="orgChartLevel2">
<li class="orgChartLevel2b">
</li>
</ul>
</li>
</ul>我尝试构建一个 CSS 网格，其中一些条目嵌套在 div 结构中：
像这样它的工作原理：
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-template-rows: 1;
}
.cent {
grid-column: 2;
grid-row: 1;
}
.left {
grid-column: 1;
grid-row: 1;
}
.right {
grid-column: 3;
grid-row: 1;
}<div class="wrapper">
<div class="cent">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>但是如果我开始嵌套我的结构，我将无法访问我想要的列：
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-template-rows: 1;
}
.cent {
grid-column: 2;
grid-row: 1;
}
.left {
grid-column: 1;
grid-row: 1;
}
.right {
grid-column: 3;
grid-row: …