3 ms·

Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries (20

65 points by todsacerdoti 2y ago

airstrike 2y ago
> 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 2y ago
  It's some 100% of hacky CSS all right.
- afiori 2y ago
  It is hacky but not a ton
nkoren 2y ago
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 2y ago
  A hat tip to you.
  - nkoren 2y ago
    ;-)
- ForTheKidz 2y ago
  inshallah!
- hinkley 2y ago
  Get out of my head, demon!
windhaven 2y ago
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 2y ago
Windows Mobile 6.5 style revival here we come!
- nayuki 2y ago
  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-5/ https://www.zdnet.com/article/first-photos-windows-mobile-6-... , https://venturebeat.com/social/windows-mobile-65-screenshot-confirms-marketplace-iphone-icons/ https://venturebeat.com/social/windows-mobile-65-screenshot-... . The software is from the year 2008.

65 points by todsacerdoti 2y ago

> 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 2y ago
It's some 100% of hacky CSS all right.
afiori 2y ago
It is hacky but not a ton

nkoren 2y ago

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 2y ago
A hat tip to you.
- nkoren 2y ago
  ;-)
ForTheKidz 2y ago
inshallah!
hinkley 2y ago
Get out of my head, demon!

windhaven 2y ago

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 2y ago

Windows Mobile 6.5 style revival here we come!

nayuki 2y ago
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-5/ https://www.zdnet.com/article/first-photos-windows-mobile-6-... , https://venturebeat.com/social/windows-mobile-65-screenshot-confirms-marketplace-iphone-icons/ https://venturebeat.com/social/windows-mobile-65-screenshot-... . The software is from the year 2008.