我想要一个看起来像这样的css网格：
┌─────────┬─────────┬─────────┬─────────┬─────────┐
│ │ │ │ │ │
│ │ item │ item │ item │ │
│ │ │ │ │ │
│ ├─────────┼─────────┼─────────┤ │
│ │ │ │ │ │
│firstcol │ item │ item │ item │ lastcol │
│ │ │ │ │ │
│ ├─────────┼─────────┼─────────┤ │
│ │ │ │ │ │
│ │ item │ item │ item │ │
│ │ │ │ │ │
└─────────┴─────────┴─────────┴─────────┴─────────┘
可以根据以下情况调整大小：
┌─────────┬─────────┬─────────┬─────────┐
│ │ │ │ │
│ │ item │ item │ │
│ │ │ │ │
│ ├─────────┼─────────┤ │
│ │ │ │ │
│ │ item │ item │ │
│ │ │ │ │
│ ├─────────┼─────────┤ │
│ │ │ │ │
│firstcol │ item │ item │ lastcol │
│ │ │ │ │
│ ├─────────┼─────────┤ │
│ │ │ │ │
│ │ item │ item │ │
│ │ │ │ │
│ ├─────────┼─────────┤ │
│ │ │ │ │
│ │ item │ │ │
│ │ │ │ │
└─────────┴─────────┘ └─────────┘
或更窄或更宽等
对于包含DIV，我尝试了一个重复。。。
.container {
display: grid;
grid-template-columns: 100px repeat( auto-fit, minmax(250px, 1fr) ) 100px;
grid-auto-flow: row; /* or column really ;-) - either is ok */
}
我尝试过媒体查询：
.container {
display: grid;
grid-template-columns: 100px 1fr 100px;
grid-auto-flow: column;
}
@media (min-width: 600px) {
.container {
grid-template-columns: 100px 1fr 1fr 100px;
}
}
@media (min-width: 800px) {
.container {
grid-template-columns: 100px 1fr 1fr 1fr 100px;
}
}
@media (min-width: 1200px) {
.container {
grid-template-columns: 100px 1fr 1fr 1fr 1fr 100px;
}
}
对于集装箱，我尝试过：
.firstcol {
grid-column: 1 / span 1 ;
grid-row: 1 / -1;
}
.lastcol {
grid-column: -2 / -1 ;
grid-row: 1 / -1;
}
以及区域上的变化。我似乎无法动态指定第一列和最后一列的区域。
我错了吗？grid-row: 1 / -1;是否意味着从第一行到最后一行，或者？
这不是你想要的，但可以以某种方式证明它…
请在全屏模式下运行该片段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#parent {
display: grid;
grid-template-columns: 100px auto 100px;
}
#firstcol {
width: 100px;
background-color: aquamarine;
}
#centercol {
display: flex;
background-color: bisque;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
animation-name: anim;
animation-timing-function: linear;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
#lastcol {
width: 100px;
background-color: aquamarine;
}
.item {
background-color: chocolate;
display: inline;
width: 100px;
height: 100px;
}
@keyframes anim {
from {
height: 100px;
}
to {
height: 800px;
}
}
</style>
<body>
<div id="parent">
<div id="firstcol">FIRST</div>
<div id="centercol">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<div id="lastcol">LAST</div>
</div>
</body>
</html>以下是我所做的，并对MMD关于flex box的想法进行了apols。
关键是：
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
minmax(150px，1fr)用最小大小的元素填充行，但允许它们拉伸以填充行。
.entry {
display: grid;
grid-template-columns: 100px auto 100px;
}
.stats {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
background-color: #fff;
color: #444;
}
.item {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0;
margin: 0;
font-size: 0.8em;
margin: 5px;
border: 1px solid gray;
}
.firstcol {
margin: 5px;
border: 1px solid lightsalmon;
}
.lastcol {
margin: 0 padding: 0;
margin: 5px;
border: 1px solid lightblue;
}<div class="entry">
<div class="firstcol">Row #1</div>
<div class="stats">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
<div class="item">G</div>
<div class="item">H</div>
<div class="item">I</div>
</div>
<div class="lastcol">
<button>Action</button>
</div>
</div>
<div class="entry">
<div class="firstcol">Row #2</div>
<div class="stats">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
<div class="item">G</div>
<div class="item">H</div>
<div class="item">I</div>
</div>
<div class="lastcol">
<button>Action</button>
</div>
</div>
<div class="entry">
<div class="firstcol">Row #3</div>
<div class="stats">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
<div class="item">G</div>
<div class="item">H</div>
<div class="item">I</div>
</div>
<div class="lastcol">
<button>Action</button>
</div>
</div>