.wrapper { width: 100%; display: grid; //使用GRID布局 grid-template-columns: repeat(8, 1fr); //分为8列 grid-auto-rows: minmax(0px, auto); //列数设置为自动 overflow: hidden; background-image:url('../img/timg (7).jpg') ; background-size: cover; grid-gap: 10px; //这里设置了gap,会看的到间隙 } .j { grid-column: 5 / 8; //占据第5到第8列 grid-row: 5 / 8; //占据第5到第8行 background-image: url('./img/20171110_79241ae8b4e2db8bf3c1a9a8772a09ab_cover_mwpm_05501609.jpg'); background-size: 100% 100%; }
CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小、位置和图层之间的关系。
像表格一样,网格布局让我们能够按行或列来对齐元素。 但是,使用CSS网格可能还是比CSS表格更容易布局。 例如,网格容器的子元素可以自己定位,以便它们像CSS定位的元素一样,真正的有重叠和层次。