六角形的响应网格

编程入门行业动态更新时间:2024-10-23 23:21:10

本文介绍了六角形的响应网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我从网上载入我网站上的多张图片。是否可以在响应式网格中为所有这些图片提供六边形？

< div> ; < img src =linkclass =Image> < / div> < div> < img src =linkclass =Image> < / div> ...

我找到了多种方法来做到这一点，但你需要填写image src 在CSS代码中。这是不可能的，因为我的网站加载从互联网随机图像jQuery所以我不能使用背景图片。

我试过这个： a href =jsfiddle/8f5m5wv0/> jsfiddle/8f5m5wv0/

解决方案

这是

此技术使用：

< img> 标记
：每个六边形包含在< li> 标记和< a> 标记
转换旋转和倾斜以形成六边形
overflow：hidden;
nth-child（）以常规模式填充六边形

此外，您还可以使用< img> 标记创建六角网格。

六角网格功能：

网格，因为它依赖于百分比宽度。六边形通过 padding-
在六边形上方悬停效果：文字幻灯片放入透明覆盖层
每个六边形保持其边界：每个六边形的悬停效果（或点击事件）只在实际形状内触发。

完整代码

以下代码段不是最新版本的网格。 GitHub repo 已维护并且是最新的。

* { margin：0; padding：0;} body {font-family：'Open Sans'，arial，sans-serif; background：rgb（123，158，158）;}＃hexGrid {overflow：hidden;宽度：90％; margin：0 auto; padding：0.707％0;}＃hexGrid：after {content：;显示：block; clear：both;}。hex {position：relative; list-style-type：none; float：left; overflow：hidden; visibility：hidden; -webkit-transform：rotate（-60deg）skewY（30deg）; -ms-transform：rotate（-60deg）skewY（30deg）; transform：rotate（-60deg）skewY（30deg）;}。hex * {position：absolute; visibility：visible;}。hexIn {display：block;宽度：100％;高度：100％; text-align：center; color：#fff; overflow：hidden; -webkit-transform：skewY（-30deg）rotate（60deg）; -ms-transform：skewY（-30deg）rotate（60deg）; transform：skewY（-30deg）rotate（60deg）; -webkit-backface-visibility：hidden; backface-visibility：hidden;} / * HEX CONTENT * /。hex img {left：-100％;右：-100％; width：auto;高度：100％; margin：0 auto;}。hex h1，.hex p {width：90％;填充：0 5％; background-color：＃008080; background-color：rgba（0，128，128，0.8）; font-family：'Raleway'，sans-serif; -webkit-transition：顶部.2s缓出，底部.2s缓出，.2s填充.2s缓出; transition：top .2s ease-out，bottom .2s ease-out，.2s padding .2s ease-out;}。hex h1 {bottom：110％; font-style：italic; font-weight：normal; font-size：1.5em; padding-top：100％; padding-bottom：100％;}。hex h1：after {content：'';显示：block; position：absolute; bottom：-1px;左：45％;宽度：10％; text-align：center; z-index：1; border-bottom：2px solid #fff;}。hex p {padding-top：50％;顶部：110％; padding-bottom：50％;} / * HOVER EFFECT * /。hexIn：hover h1 {bottom：50％;填充底部：10％;}。 padding-top：10％;} / *空格和大小* / @ media（min-width：1201px）{.hex {width：19.2％ / * =（100-4）/ 5 * /填充底：22.170％。 / * = width / sin（60deg）* /} .hex：第n个子（9n + 6），.hex：第n个子（9n + 7）：nth-child（9n + 9）{margin-top：-4.676％; margin-bottom：-4.676％; -webkit-transform：translateX（50％）rotate（-60deg）skewY（30deg）; -ms-transform：translateX（50％）rotate（-60deg）skewY（30deg）; transform：translateX（50％）rotate（-60deg）skewY（30deg）; } .hex：nth-child（9n + 6）：last-child，.hex：nth-child（9n + 7）：last-child，.hex：nth- hex：nth-child（9n + 9）：last-child {margin-bottom：0; } .hex：nth-child（9n + 6）{margin-left：0.5％; clear：left; } .hex：nth-child（9n + 10）{clear：left; } .hex：nth-child（9n + 2），.hex：nth-child（9n + 7）{margin-left：1％;利润率：1％; } .hex：nth-child（9n + 3），.hex：nth-child（9n + 4），.hex：nth-child（9n + 8）{margin-right：1％ }} @ media（max-width：1200px）and（min-width：901px）{.hex {width：24.25％; / * =（100-3）/ 4 * /填充底：28.001％; / * = width / sin（60deg）* /} .hex：第n个子节点（7n + 5），.hex：第n子节点（7n + 6）顶部：-6.134％; margin-bottom：-6.134％; -webkit-transform：translateX（50％）rotate（-60deg）skewY（30deg）; -ms-transform：translateX（50％）rotate（-60deg）skewY（30deg）; transform：translateX（50％）rotate（-60deg）skewY（30deg）; } .hex：nth-child（7n + 5）：last-child，.hex：nth-child（7n + 6）：last-child，.hex：底线：0; } .hex：nth-child（7n + 2），.hex：nth-child（7n + 6）{margin-left：1％;利润率：1％; } .hex：nth-child（7n + 3）{margin-right：1％; } .hex：nth-child（7n + 8）{clear：left; } .hex：nth-child（7n + 5）{clear：left; margin-left：0.5％; }} @ media（max-width：900px）and（min-width：601px）{.hex {width：32.666％; / * =（100-2）/ 3 * /填充底：37.720％。 / * = width / sin（60）* /} .hex：nth-child（5n + 4），.hex：nth-child（5n + 5）{margin-top：-8.564％ margin-bottom：-8.564％; -webkit-transform：translateX（50％）rotate（-60deg）skewY（30deg）; -ms-transform：translateX（50％）rotation（-60deg）skewY（30deg）; transform：translateX（50％）rotate（-60deg）skewY（30deg）; } .hex：nth-child（5n + 4）：last-child，.hex：nth-child（5n + 5）：last-child {margin-bottom：0; } .hex：nth-child（5n + 4）{margin-right：1％; margin-left：0.5％; } .hex：nth-child（5n + 2）{margin-left：1％;利润率：1％; } .hex：nth-child（5n + 6）{clear：left; }} @ media（max-width：600px）{.hex {width：49.5％; / * =（100-1）/ 2 * /填充底：57.158％。 / * = width / sin（60）* /} .hex：nth-child（3n + 3）{margin-top：-13.423％; margin-bottom：-13.423％; -webkit-transform：translateX（50％）rotate（-60deg）skewY（30deg）; -ms-transform：translateX（50％）rotate（-60deg）skewY（30deg）; transform：translateX（50％）rotate（-60deg）skewY（30deg）; } .hex：nth-child（3n + 3）：last-child {margin-bottom：0; } .hex：nth-child（3n + 3）{margin-left：0.5％; } .hex：nth-child（3n + 2）{margin-left：1％; } .hex：nth-child（3n + 4）{clear：left; }}

< link href ='http：// fonts.googleapis/css?family=Open+Sans:400italic,700italic,800italic,400,700,800'rel ='stylesheet'type ='text / css'>< link href ='http：//fonts.googleapis。 com / css？family = Raleway：400,700,300,200,100,900'rel ='stylesheet'type ='text / css'>< ul id =hexGrid> < li class =hex> < a class =hexInhref =＃> < img src =farm9.staticflickr/8461/8048823381_0fbc2d8efb.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm5.staticflickr/4144/5053682635_b348b24698.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm3.staticflickr/2827/10384422264_d9c7299146.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm7.staticflickr/6217/6216951796_e50778255c.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex>< < a class =hexInhref =＃> < img src =farm7.staticflickr/6083/6055581292_d94c2d90e3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm3.staticflickr/2827/10384422264_d9c7299146.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm8.staticflickr/7187/6895047173_d4b1a0d798.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm4.staticflickr/3766/12953056854_b8cdf14f21.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm7.staticflickr/6139/5986939269_10721b8017.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm4.staticflickr/3165/5733278274_2626612c70.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm8.staticflickr/7163/6822904141_50277565c3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm4.staticflickr/3771/13199704015_72aa535bd7.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm7.staticflickr/6083/6055581292_d94c2d90e3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm8.staticflickr/7187/6895047173_d4b1a0d798.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm3.staticflickr/2878/10944255073_973d2cd25c.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm9.staticflickr/8461/8048823381_0fbc2d8efb.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm5.staticflickr/4144/5053682635_b348b24698.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm3.staticflickr/2827/10384422264_d9c7299146.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm7.staticflickr/6217/6216951796_e50778255c.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm7.staticflickr/6083/6055581292_d94c2d90e3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm3.staticflickr/2827/10384422264_d9c7299146.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm8.staticflickr/7187/6895047173_d4b1a0d798.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm4.staticflickr/3766/12953056854_b8cdf14f21.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm3.staticflickr/2878/10944255073_973d2cd25c.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm9.staticflickr/8461/8048823381_0fbc2d8efb.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm5.staticflickr/4144/5053682635_b348b24698.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm3.staticflickr/2827/10384422264_d9c7299146.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm7.staticflickr/6217/6216951796_e50778255c.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm7.staticflickr/6083/6055581292_d94c2d90e3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm3.staticflickr/2827/10384422264_d9c7299146.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm8.staticflickr/7187/6895047173_d4b1a0d798.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm4.staticflickr/3766/12953056854_b8cdf14f21.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm7.staticflickr/6139/5986939269_10721b8017.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm4.staticflickr/3165/5733278274_2626612c70.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm8.staticflickr/7163/6822904141_50277565c3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm4.staticflickr/3771/13199704015_72aa535bd7.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm7.staticflickr/6083/6055581292_d94c2d90e3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm8.staticflickr/7187/6895047173_d4b1a0d798.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm7.staticflickr/6139/5986939269_10721b8017.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm4.staticflickr/3165/5733278274_2626612c70.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm8.staticflickr/7163/6822904141_50277565c3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm4.staticflickr/3771/13199704015_72aa535bd7.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm7.staticflickr/6083/6055581292_d94c2d90e3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =farm8.staticflickr/7187/6895047173_d4b1a0d798.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li>< / ul>

更改每行六边形数量

网格根据视口自适应每行六边形数量

如果您不需要媒体查询，但只是想更改每个六边形的数量行，您可以保留CSS从相应的媒体查询，并删除不需要的。

有关更多自定义，请参阅六边形的大小和间距。

演示

有关所有演示的列表，请参阅此代码集集合：响应式六边形网格，每行具有不同数量的六边形，中心选项等...

这是原始的 codepen演示与 .pusher 元素，以使一个不规则网格六边形。 .pusher 元素用于在网格中创建孔。

I loaded in multiple images on my website from the internet. Is it possible to give all those images an hexagon shape in a responsive grid?

<div> <img src="link" class="Image"> </div> <div> <img src="link" class="Image"> </div> ...

I found multiple ways to do this but you needed to fill in the image src in the CSS code. This isnt possible for me cause the website loads in random images from the internet with jQuery so I can't use background images.

I tried this: jsfiddle/8f5m5wv0/

解决方案

Here is a demo and a repositery for a responsive grid of hexagons.

This technique uses :

the <img> tag
an unordered list : each hexagon is contained in a <li> tag and an <a> tag
transform rotate and skew to make the hexagon shapes
overflow:hidden;
nth-child() to space the hexagons in a regular pattern

And more to create the hexagon grid with the <img> tag.

Hexagon grid features :

The grid is responsive as it relies on percent widths. The hexagons maintain their aspect ratio with the padding-bottom technique and the images resize to fit the hexagon shape.
A hover effect over the hexagons : a text slides in with a transparent overlay over the image.
Each hexagon maintains its boundaries : the hover effect (or click event) for each hexagon only triggered inside the actual shape.

Full code

The following snippet isn't the latest version of the grid. The GitHub repo is maintained and up to date. Issues and contributions can be made there.

* { margin: 0; padding: 0; } body { font-family: 'Open Sans', arial, sans-serif; background: rgb(123, 158, 158); } #hexGrid { overflow: hidden; width: 90%; margin: 0 auto; padding:0.707% 0; } #hexGrid:after { content: ""; display: block; clear: both; } .hex { position: relative; list-style-type: none; float: left; overflow: hidden; visibility: hidden; -webkit-transform: rotate(-60deg) skewY(30deg); -ms-transform: rotate(-60deg) skewY(30deg); transform: rotate(-60deg) skewY(30deg); } .hex * { position: absolute; visibility: visible; } .hexIn { display:block; width: 100%; height: 100%; text-align: center; color: #fff; overflow: hidden; -webkit-transform: skewY(-30deg) rotate(60deg); -ms-transform: skewY(-30deg) rotate(60deg); transform: skewY(-30deg) rotate(60deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* HEX CONTENT */ .hex img { left: -100%; right: -100%; width: auto; height: 100%; margin: 0 auto; } .hex h1, .hex p { width: 90%; padding: 0 5%; background-color: #008080; background-color: rgba(0, 128, 128, 0.8); font-family: 'Raleway', sans-serif; -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out; transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out; } .hex h1 { bottom: 110%; font-style: italic; font-weight: normal; font-size: 1.5em; padding-top: 100%; padding-bottom: 100%; } .hex h1:after { content: ''; display: block; position: absolute; bottom: -1px; left: 45%; width: 10%; text-align: center; z-index: 1; border-bottom: 2px solid #fff; } .hex p { padding-top: 50%; top: 110%; padding-bottom: 50%; } /* HOVER EFFECT */ .hexIn:hover h1 { bottom: 50%; padding-bottom: 10%; } .hexIn:hover p { top: 50%; padding-top: 10%; } /* SPACING AND SIZING */ @media (min-width:1201px) { .hex { width: 19.2%; /* = (100-4) / 5 */ padding-bottom: 22.170%; /* = width / sin(60deg) */ } .hex:nth-child(9n+6), .hex:nth-child(9n+7), .hex:nth-child(9n+8), .hex:nth-child(9n+9) { margin-top: -4.676%; margin-bottom: -4.676%; -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg); -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg); transform: translateX(50%) rotate(-60deg) skewY(30deg); } .hex:nth-child(9n+6):last-child, .hex:nth-child(9n+7):last-child, .hex:nth-child(9n+8):last-child, .hex:nth-child(9n+9):last-child { margin-bottom: 0; } .hex:nth-child(9n+6) { margin-left: 0.5%; clear: left; } .hex:nth-child(9n+10) { clear: left; } .hex:nth-child(9n+2), .hex:nth-child(9n+ 7) { margin-left: 1%; margin-right: 1%; } .hex:nth-child(9n+3), .hex:nth-child(9n+4), .hex:nth-child(9n+8) { margin-right: 1%; } } @media (max-width: 1200px) and (min-width:901px) { .hex { width: 24.25%; /* = (100-3) / 4 */ padding-bottom: 28.001%; /* = width / sin(60deg) */ } .hex:nth-child(7n+5), .hex:nth-child(7n+6), .hex:nth-child(7n+7) { margin-top: -6.134%; margin-bottom: -6.134%; -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg); -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg); transform: translateX(50%) rotate(-60deg) skewY(30deg); } .hex:nth-child(7n+5):last-child, .hex:nth-child(7n+6):last-child, .hex:nth-child(7n+7):last-child { margin-bottom: 0; } .hex:nth-child(7n+2), .hex:nth-child(7n+6) { margin-left: 1%; margin-right: 1%; } .hex:nth-child(7n+3) { margin-right: 1%; } .hex:nth-child(7n+8) { clear: left; } .hex:nth-child(7n+5) { clear: left; margin-left: 0.5%; } } @media (max-width: 900px) and (min-width:601px) { .hex { width: 32.666%; /* = (100-2) / 3 */ padding-bottom: 37.720%; /* = width / sin(60) */ } .hex:nth-child(5n+4), .hex:nth-child(5n+5) { margin-top: -8.564%; margin-bottom: -8.564%; -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg); -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg); transform: translateX(50%) rotate(-60deg) skewY(30deg); } .hex:nth-child(5n+4):last-child, .hex:nth-child(5n+5):last-child { margin-bottom: 0; } .hex:nth-child(5n+4) { margin-right: 1%; margin-left: 0.5%; } .hex:nth-child(5n+2) { margin-left: 1%; margin-right: 1%; } .hex:nth-child(5n+6) { clear: left; } } @media (max-width: 600px) { .hex { width: 49.5%; /* = (100-1) / 2 */ padding-bottom: 57.158%; /* = width / sin(60) */ } .hex:nth-child(3n+3) { margin-top: -13.423%; margin-bottom: -13.423%; -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg); -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg); transform: translateX(50%) rotate(-60deg) skewY(30deg); } .hex:nth-child(3n+3):last-child { margin-bottom: 0; } .hex:nth-child(3n+3) { margin-left: 0.5%; } .hex:nth-child(3n+2) { margin-left: 1%; } .hex:nth-child(3n+4) { clear: left; } }

Changing the number of hexagons per row

The grid adapts the number of hexagons per row according to the viewport width from 5 on screens wider than 1200px to 2 on screens narrower than 600px.

If you don't need the media queries but just want to change the number of hexagons per row, you can keep the CSS from the corresponding media query and remove the unneeded ones.

For more customization, see sizing and spacing of hexagons.

Demos

For a list of all the demos, see this codepen collection: Responsive grids of hexagons with different numbers of hexagons per row, centering options and more...

Here is the original codepen demo with the .pusher element to make an irregular grid of hexagons. The .pusher element is used to make the "holes" in the grid.

更多推荐

六角形的响应网格

本文发布于:2023-11-30 02:38:44，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1648433.html