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

https://css-tricks.com/hexagons-and-beyond-flexible-responsive-grid-patterns-sans-media-queries/

by todsacerdoti • 1 year ago

65 11 1 year ago

airstrike• 1 year 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• 1 year ago

It's some 100% of hacky CSS all right.

afiori• 1 year ago

It is hacky but not a ton

nkoren2• 1 year 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• 1 year ago

A hat tip to you.

nkoren2• 1 year ago

;-)

ForTheKidz• 1 year ago

inshallah!

hinkley• 1 year ago

Get out of my head, demon!

windhaven• 1 year 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• 1 year ago

Windows Mobile 6.5 style revival here we come!

nayuki• 1 year 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-... , https://venturebeat.com/social/windows-mobile-65-screenshot-... . The software is from the year 2008.

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

Related Stories