width: 450px; /* the size */aspect-ratio: 1; /* equal height */ grid: auto-flow 1fr / repeat(3, 1fr); gap: var(--g); } .gallery img:nth-child(2) { grid-area: 1 / 2 / span 2 / span 2; } .gallery img:nth-child(3) { grid-area: 2 / 1 / span 2 / span 2; ...
.gallery{--g:6px;/* the gap */display:grid;width:450px;/* the size */aspect-ratio:1;/* equal height */grid:auto-flow 1fr /repeat(3,1fr);gap:var(--g);}.gallery img:nth-child(2){grid-area:1 / 2 / span 2 / span 2;}.gallery img:nth-child(3){grid-area:2 / 1 / s...
你可以使用javascript来实现这个功能。我认为没有一个只使用CSS的解决方案：）
width: 450px; /* the size */ aspect-ratio: 1; /* equal height */ grid: auto-flow 1fr / repeat(3, 1fr); gap: var(--g); } .gallery img:nth-child(2) { grid-area: 1 / 2 / span 2 / span 2; } .gallery img:nth-child(3) { grid-area: 2 / 1 / span 2 / span 2;...
As soon as we set the display property to grid or flex on a parent, we give the children a relationship to each other. That relationship enables the box-alignment properties to work, making equal-height columns simple. 一旦我们为父元素设置display属性为grid或者flex,便给子元素彼此之间赋予了关联...
If you need to achieve 3 equal-height columns in old browsers (back to IE 5.5) that don't support CSS grid or flexbox, you can use mynested equal-height columns method, here is an example of a2 column layout without flexbox.
.gallery{--g:6px;/* the gap */display:grid;width:450px;/* the size */aspect-ratio:1;/* equal height */grid:auto-flow1fr/repeat(3,1fr);gap:var(--g);}.galleryimg:nth-child(2){grid-area:1/2/span2/span2;}.galleryimg:nth-child(3){grid-area:2/1/span2/span2;} ...
Using1frproduces equal-height rows determined by the tallest row in the grid. (View Demo: Grid row heights 1fr vs auto) For example, if your schedule grid has 15-minute increments from 7 a.m. to 6 p.m., that’s a total of 48 grid rows. In that case, you probably want to use...
(For those working with CSS in the noughties, achieving equal-height columns was a nightmare!) Useful things to know about numbered grid lines If you look again at the image above, you’ll see that, along the bottom, the vertical lines are also named with negative numbers. Each grid line...
Here's a subgrid example: .grid { display: inline-grid; grid: auto auto 100px / masonry; align-content: center; height: 300px; border: 1px solid; } .grid > * { margin: 5px; background: silver; } .grid > :nth-child(2n) { background: pink; } .grid subgrid { display:...