[HN Gopher] Hexagons and Beyond: Flexible, Responsive Grid Patte...
___________________________________________________________________
Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media
Queries (20
Author : todsacerdoti
Score : 41 points
Date : 2025-03-18 13:23 UTC (2 days ago)
(HTM) web link (css-tricks.com)
(TXT) w3m dump (css-tricks.com)
| airstrike wrote:
| _> This is a fully responsive hexagon grid made without media
| queries, JavaScript, or a ton of hacky CSS._
|
| the CSS: .main { display:flex;
| --s: 100px; /* size */ --m: 4px; /* margin */
| --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px); }
| .container { font-size: 0; /*disable white space
| between inline block element */ } .container
| div { width: var(--s); margin: var(--m);
| height: calc(var(--s)*1.1547); display: inline-block;
| font-size:initial; clip-path: polygon(0% 25%, 0% 75%,
| 50% 100%, 100% 75%, 100% 25%, 50% 0%); background: red;
| margin-bottom: calc(var(--m) - var(--s)*0.2885); }
| .container div:nth-child(odd) { background:green;
| } .container::before { content: "";
| width: calc(var(--s)/2 + var(--m)); float: left;
| height: 120%; shape-outside: repeating-linear-gradient(
| #0000 0 calc(var(--f) - 3px),
| #000 0 var(--f)); }
| Muromec wrote:
| It's some 100% of hacky CSS all right.
| nkoren wrote:
| Wow, this is a person who could be fatally nerd-sniped if you
| suggest that their next CSS trick should be an aperiodic
| monotile...
| adfm wrote:
| A hat tip to you.
| nkoren wrote:
| ;-)
| ForTheKidz wrote:
| inshallah!
| hinkley wrote:
| Get out of my head, demon!
| windhaven wrote:
| Doesn't seem to work with WebKit (tried with Safari and Firefox
| on iOS and Safari on macOS, but Firefox on macOS does work)
|
| Edit: A stray word
| fire_lake wrote:
| Windows Mobile 6.5 style revival here we come!
| nayuki wrote:
| It's my first time hearing of this, so I went and found some
| screenshots: https://www.zdnet.com/article/first-photos-
| windows-mobile-6-... , https://venturebeat.com/social/windows-
| mobile-65-screenshot-... . The software is from the year 2008.
___________________________________________________________________
(page generated 2025-03-20 23:00 UTC)