Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Here you go. Wrapping the element with an aspect-ratio in a flex container was key to getting it to apply the ratio. You also have to be aware that the default flexbox alignment is "stretch" which will override the size you specify, so you need to opt out of that by using `justify-content: center` (main axis) or `align-items: center` (cross axis) (start or end alignment will also work if that's where you want it. The inner rectangle doesn't require this because it has the bottom green rectangle to flex and take up the extra space.

  <!DOCTYPE html>
  <html>
    <head>
      <style type="text/css">
        * {
          box-sizing: border-box;
        }

        html, body {
          height: 100%;
        }

        body {
          background: #999;
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .tall-rectangle {
          height: 100%;
          aspect-ratio: 0.66;
          display: flex;
          flex-direction: column;
          background: red;
        }

        .square {
          background: black;
          width: 100%;
          aspect-ratio: 1;
          display: flex;
          flex-wrap: wrap;
        }

        .inner-rectangle {
          background: green;
          flex: 1;
        }

        .tile { 
          width: 12.5%;
          height: 12.5%;
        }

        .tile.odd-row { background: black; }
        .tile.odd-row.tile:nth-of-type(2n) { background: white; }

        .tile.even-row { background: white; }
        .tile.even-row.tile:nth-of-type(2n) { background: black; }

      </style>
    </head>
    <body>
      <div class="tall-rectangle">
        <div class="square">
          <div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div>
          <div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div>
          <div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div>
          <div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div>
          <div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div>
          <div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div>
          <div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div>
          <div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div>
          <div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div>
          <div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div>
          <div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div>
          <div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div>
          <div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div>
          <div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div>
          <div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div>
          <div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div>
        </div>
        <div class="inner-rectangle"></div>
      </div>
    </body>
  </html>
For CSS grid, you can use the same HTML with the following styles:

    <style type="text/css">
      * {
        box-sizing: border-box;
      }

      html, body {
        height: 100%;
      }

      body {
        background: #999;
        display: grid;
        grid-template-rows: 100%;
        justify-content: center;
      }

      .tall-rectangle {
        background: red;
        height: 100%;
        aspect-ratio: 0.66;
        display: grid;
        grid-auto-rows: auto 1fr;
      }

      .square {
        background: black;
        width: 100%;
        aspect-ratio: 1;
        display: grid;
        grid-template-rows: repeat(8, 1fr);
        grid-template-columns: repeat(8, 1fr);
      }

      .inner-rectangle {
        background: green;
        flex: 1;
      }

      .tile.odd-row { background: black; }
      .tile.odd-row.tile:nth-of-type(2n) { background: white; }

      .tile.even-row { background: white; }
      .tile.even-row.tile:nth-of-type(2n) { background: black; }

    </style>


Thanks for the tip about flexbox defaulting to stretch! That goes a long way.

I think your solution is very close but breaks when I scale down the width of my viewport. If I set Chrome dev to iPhone 12 Pro or iPhone SE, for example, the chess board starts getting cut off.


> I think your solution is very close but breaks when I scale down the width of my viewport. If I set Chrome dev to iPhone 12 Pro or iPhone SE, for example, the chess board starts getting cut off.

Hmm... what would you like it to do in that case? Start shrinking the height? You can try adding `max-width: 100%` to the tall rectangle.


I’ll try tomorrow at a PC.

Yeah I think so. The idea is to fill as much of the viewport as possible but always maintain aspect ratio. Oh did I describe the challenge/problem poorly maybe? Sorry!

Still, you’ve gotten closer than I.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: