使用flexbox(或其他CSS)创建砌体网格 [英] Create a Masonry grid with flexbox (or other CSS)
问题描述
我想在CSS中使用具有相同宽度但不是高度的元素来实现网格效果。我想下面的元素始终在底部的50px,无论接下来是什么。
我尝试使用浮动,但该错误。所以我尝试了Flex,但它仍然没有做我想要的。
.container
display:flex
flex-wrap wrap
align-content flex-start
align-items flex-start
我想要什么:
我有什么:
尝试新的
I would like to achieve a grid effect in CSS with elements that all have the same width in size but not in height. I would like the element underneath to be always at 50px of the bottom one, whatever is next.
I tried with floats, but that bug. So I tried with Flex, but it still does not do what I want.
.container
display: flex
flex-wrap wrap
align-content flex-start
align-items flex-start
What I would like:
What I have:
Try the new CSS Grid Layout:
grid-container {
display: grid; /* 1 */
grid-auto-rows: 50px; /* 2 */
grid-gap: 10px; /* 3 */
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* 4 */
}
[short] {
grid-row: span 1; /* 5 */
background-color: green;
}
[tall] {
grid-row: span 2;
background-color: crimson;
}
[taller] {
grid-row: span 3;
background-color: blue;
}
[tallest] {
grid-row: span 4;
background-color: gray;
}
<grid-container>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
</grid-container>
jsFiddle demo
How it works:
- Establish a block-level grid container.
- The
grid-auto-rows
property sets the height of automatically generated rows. In this grid each row is 50px tall. - The
grid-gap
property is a shorthand forgrid-column-gap
andgrid-row-gap
. This rule sets a 10px gap between grid items. (It doesn't apply to the area between items and the container.) The
grid-template-columns
property sets the width of explicitly defined columns.The
repeat
notation defines a pattern of repeating columns (or rows).The
auto-fill
function tells the grid to line up as many columns (or rows) as possible without overflowing the container. (This can create a similar behavior to flex layout'sflex-wrap: wrap
.)The
minmax()
function sets a minimum and maximum size range for each column (or row). In the code above, the width of each column will be a minimum of 30% of the container and maximum of whatever free space is available.The
fr
unit represents a fraction of the free space in the grid container. It's comparable to flexbox'sflex-grow
property.With
grid-row
andspan
we're telling grid items how many rows they should span.
Browser Support for CSS Grid
- Chrome - full support as of March 8, 2017 (version 57)
- Firefox - full support as of March 6, 2017 (version 52)
- Safari - full support as of March 26, 2017 (version 10.1)
- Edge - full support as of October 16, 2017 (version 16)
- IE11 - no support for current spec; supports obsolete version
Here's the complete picture: http://caniuse.com/#search=grid
Cool grid overlay feature in Firefox: In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. On click it displays an outline of your grid on the page.
More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
这篇关于使用flexbox(或其他CSS)创建砌体网格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!