CODEWITHSUNDEEP
csslayoutsassbourbonneat
Strontium_99
Strontium_99

Reputation: 1813

Replicating a table layout using Bourbon Neat

I'm trying to replicate this table layout using divs and Bourbon Neat:

    <table border="1">
        <tr>
          <td colspan="2" class="top">Top</td>
          <td colspan="2" rowspan="2" class="right">Right</td>
        </tr>
        <tr>
          <td class="lower">Lower</td>
          <td class="lower">Lower</td>
        </tr>
    </table>

https://jsfiddle.net/m72pefgd/

Basically I want the layout height to be dictated by whatever is in the "Right" div.

The "Top" div is 50% width & height of the parent container, which is stretched to the height of the "Right".

And the "Lower" divs are both 50% width of the "Top" div and 50% of the parent container.

If you look at the Jsfiddle it makes sense. Oh, and it also needs to be responsive.

Apologies for the noob question, but I'm just getting started with Bourbon/Neat.

Thanks.

Upvotes: 0

Views: 67

Answers (1)

alexbea
alexbea

Reputation: 1370

As a quick note, this is going to be a perfect use case for the upcoming CSS Grid system (you'll need to activate it to use at the moment). This hits FF and Chrome in March.

With Flexbox, we'd use a few nested flex-containers, one of which would have flex-direction set to column. The snippet below should get you started. I used flex-grow: 1 on everything to get them to fill the space equally, but width: 50% might be more appropriate to get the splits exactly right.

The overall wrapper will take care of making the left and right sides the same height. At smaller browser sizes, I'd probably make my .l-wrap element, the outer wrapper, flex-direction: column or set it back to display: block with some use of width: 100%; to be explicit if necessary.

/* start setup */
* {
  min-width: 50px;
  min-height: 50px;
  box-sizing: border-box;
}
.bg {
  border: 1px solid #a20;
  background-color: rgba(125, 25, 65, .15);
}
.l-wrap {
  width: 80%;
  height: 80%;
}
/* end setup */

.l-wrap,
.l-left,
.l-bottom {
  display: flex;
}

.l-left {
  flex-direction: column;
}

.l-left,
.l-right,
.l-top,
.l-bottom,
.l-column {
  flex-grow: 1;
}
<section class="l-wrap bg">
  <article class="l-left bg">
    <header class="l-top bg">
    </header>
    <div class="l-bottom bg">
      <div class="l-column bg"></div>
      <div class="l-column bg"></div>
    </div>
  </article>
  <aside class="l-right bg">
  </aside>
</section>

Upvotes: 1

Related Questions