CSS grid实现蜂巢布局的六边形导航页面模板

hive gallery layout with css grid

css, grid, template

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3338
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<body style="--n-rows: 3; --n-cols: 6;">
  <style>.hex-cell:nth-of-type(5n + 1) { grid-column-start: 2 }</style>
  <div class="hex-cell"><img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=650&amp;fm=jpg"/></div>
  <div class="hex-cell"><img src="https://images.unsplash.com/photo-1497733942558-e74c87ef89db?w=650&amp;fm=jpg"/></div>
  <div class="hex-cell"><img src="https://images.unsplash.com/photo-1540744276164-9dc898353c7b?w=650&amp;fm=jpg"/></div>
  <div class="hex-cell"><img src="https://images.unsplash.com/photo-1469975692758-66d107a536cb?w=650&amp;fm=jpg"/></div>
  <div class="hex-cell"><img src="https://images.unsplash.com/photo-1490845060161-85f9ce08a9f4?w=650&amp;fm=jpg"/></div>
  <div class="hex-cell"><img src="https://images.unsplash.com/photo-1541673504494-8bcc1a340180?w=650&amp;fm=jpg"/></div>
  <div class="hex-cell"><img src="https://images.unsplash.com/photo-1515937350506-3e7b51a95339?w=650&amp;fm=jpg"/></div>
</body>

hive gallery layout with css grid

css, grid, template

编辑器支持Emmet

快捷键

hive gallery layout with css grid

css, grid, template

HTML5 CSS3蜂巢（六边形）形状的页面布局模板

HTML5 CSS3新奇的响应式皂形网格布局页面模板 | mask-image使用示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：