电网CSS全宽列

-1

我无法让我的CSS电网项目走“全宽”在移动，因为我不知道有多少列将有：电网CSS全宽列

https://codepen.io/matthewfelgate/pen/Kvqdmp?editors=1100

* { outline: 1px dashed red; } 
 
.box { 
 
    display: grid; 
 
    &__heading, &__text { padding: 1em; } 
 
    @media (max-width: 800px) { 
 

 
    } 
 
    @media (min-width: 801px) { 
 
    &__heading { 
 
     grid-row: 1; 
 
    } 
 
    &__text { 
 
     grid-column-start: 1; 
 
     grid-column-end: -1; 
 
    }  
 
    } 
 
    
 
}

<div class="box"> 
 

 
    <div class="box__heading">Heading 1</div> 
 
    <div class="box__text">Text 1</div> 
 

 
    <div class="box__heading">Heading 2</div> 
 
    <div class="box__text">Text 2</div> 
 

 
    <div class="box__heading">Heading 3</div> 
 
    <div class="box__text">Text 3</div> 
 

 
    <div class="box__heading">Heading 4</div> 
 
    <div class="box__text">Text 4</div> 
 

 
</div>

grid-column-end: -1;似乎不工作？

编辑：唐是对的，我得到了错误的方式媒体查询。我正在尝试在桌面和手机上使用手机制作标签。

来源

2017-08-10 Matthew Felgate

'格列末尾：-1'仅适用于* *明确电网。换句话说，定义了列的数量。由于您使用的是*隐式*网格（容器自动添加列），因此负整数方法无效（[source]（https://stackoverflow.com/a/44053668/3597276））。 –

目前似乎还没有很好的答案。一个[**类似的问题**]（https://stackoverflow.com/q/44052336/3597276）有一个接受的答案，建议设置一个列以跨越大量的列。在我看来，这是一个糟糕的解决方案，在某些浏览器中甚至可能无法使用（因为它们实际上会渲染所有轨道）。但是基于上述观点，有些人认为它很有用。 –

这个例子非常令人困惑，因为当页面变小时，您会横向添加* more *内容，您是否有向后的例子？我很困惑你想达到什么目的。 – Don

将弹性工作满足您的需求？

.box { 
    display: flex; 
    flex-direction: column; 
    &__heading, &__text { padding: 1em; } 
}

来源

2017-08-10 16:36:48

这个人找到了一个解决方案啊！

https://codepen.io/thinsoldier/pen/ZJyXzq?editors=1100

使用：

grid-template-columns: repeat(auto-fill,minmax(100px,auto));

来源

2017-08-11 08:23:07

电网CSS全宽列

回答

相关问题