Menu icon Foundation
Flexgird boxes with border

Homepage

Hello,

What's the most Foundation-y (v6) way to achieve the above layout with flex-grid? My hackish idea is to add thick borders, but there might be better solutions out there I don't see instantly.

flexflexboxflexgridFoundation 6.2

Homepage

Hello,

What's the most Foundation-y (v6) way to achieve the above layout with flex-grid? My hackish idea is to add thick borders, but there might be better solutions out there I don't see instantly.

Tibor Szász almost 4 years ago

I managed to build it with flexboxes:

  <section class="blocks">
    <div class="row">
      <div class="block text-center columns small-4">
        <div class="wrapper">
          <div class="small-12 title columns">
            <h3>CO-WORKING COMMUNITY</h3>
          </div>
          <div class="small-12 body columns">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ullam ipsa sint dolorem provident impedit doloribus totam neque consectetur. Omnis accusamus nemo laboriosam magni quas doloribus odit minima, quaerat qui.</p>
          </div>
          <div class="small-12 action columns">
            <a class="button">Learn more</a>
          </div>
        </div>
      </div>
      <div class="block text-center columns small-4">
        <div class="wrapper">
          <div class="small-12 title columns">
            <h3>Title</h3>
          </div>
          <div class="small-12 body columns">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. qui.</p>
          </div>
          <div class="small-12 action columns">
            <a class="button">Learn more</a>
          </div>
        </div>
      </div>
      <div class="block text-center columns small-4">
        <div class="wrapper">
          <div class="small-12 title columns">
            <h3>Title</h3>
          </div>
          <div class="small-12 body columns">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ullam ipsa sint dolorem provident impedit doloribus totam neque consectetur. Omnis accusamus nemo laboriosam magni quas doloribus odit minima, quaerat qui.</p>
          </div>
          <div class="small-12 action columns">
            <a class="button">Learn more</a>
          </div>
        </div>
      </div>
    </div>
  </section>
section.blocks {

  padding: 3rem 0;
  background: $dirty-white;

  .columns {
    display: flex;
    flex-direction: column;
  }

  .block {
    position: relative;

    .wrapper {
      display: flex;
      flex-direction: column;
      border: 2px solid $black;
      flex: 1;
      background: $white;

      .title {
        flex: 0 0 100%;
        height: 8rem;
        justify-content: center;
        width: 100%;
        position: relative;

        h3 {
          font-size: 1.6rem;
          line-height: 1.8rem;
          margin: 0 3rem;
        }

        &:after {
          content: '';
          position: absolute;
          left: 1.5rem;
          right: 1.5rem;
          height: 1px;
          background: $ultra-light-gray;
          bottom: 0;
        }
      }

      .body {
        flex: 1 1 100%;
        padding: 1.5rem;
      }

      .action {
        flex: 0 0 100%;

        a {
          min-width: inherit;
          margin: 0rem 3rem 3rem 3rem;
        }
      }
    }
  }
}

Tibor Szász almost 4 years ago

Well don't rely on this. This only looks good in chrome. All other browsers renders this differently and awfully. Shame.