Menu icon Foundation
Xlarge block grid don't work

Can i add xx/xlarge-block-grid-5 to my block grid? When i add it in don't work. How i can did it? I don't use sass, only css. Foundation 5.

block gridgrid

Can i add xx/xlarge-block-grid-5 to my block grid? When i add it in don't work. How i can did it? I don't use sass, only css. Foundation 5.

Tomi Tomion over 5 years ago

No there is no xx/xlarge-block-grid by default, but you can add it easily using media queries

Add this code to your CSS file

@media only screen and (min-width: 90.063em) {
  .xlarge-block-grid-1 > li {
    width: 100%;
    list-style: none; }
    .xlarge-block-grid-1 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-1 > li:nth-of-type(1n+1) {
      clear: both; }

  .xlarge-block-grid-2 > li {
    width: 50%;
    list-style: none; }
    .xlarge-block-grid-2 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-2 > li:nth-of-type(2n+1) {
      clear: both; }

  .xlarge-block-grid-3 > li {
    width: 33.33333%;
    list-style: none; }
    .xlarge-block-grid-3 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-3 > li:nth-of-type(3n+1) {
      clear: both; }

  .xlarge-block-grid-4 > li {
    width: 25%;
    list-style: none; }
    .xlarge-block-grid-4 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-4 > li:nth-of-type(4n+1) {
      clear: both; }

  .xlarge-block-grid-5 > li {
    width: 20%;
    list-style: none; }
    .xlarge-block-grid-5 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-5 > li:nth-of-type(5n+1) {
      clear: both; }

  .xlarge-block-grid-6 > li {
    width: 16.66667%;
    list-style: none; }
    .xlarge-block-grid-6 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-6 > li:nth-of-type(6n+1) {
      clear: both; }

  .xlarge-block-grid-7 > li {
    width: 14.28571%;
    list-style: none; }
    .xlarge-block-grid-7 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-7 > li:nth-of-type(7n+1) {
      clear: both; }

  .xlarge-block-grid-8 > li {
    width: 12.5%;
    list-style: none; }
    .xlarge-block-grid-8 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-8 > li:nth-of-type(8n+1) {
      clear: both; }

  .xlarge-block-grid-9 > li {
    width: 11.11111%;
    list-style: none; }
    .xlarge-block-grid-9 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-9 > li:nth-of-type(9n+1) {
      clear: both; }

  .xlarge-block-grid-10 > li {
    width: 10%;
    list-style: none; }
    .xlarge-block-grid-10 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-10 > li:nth-of-type(10n+1) {
      clear: both; }

  .xlarge-block-grid-11 > li {
    width: 9.09091%;
    list-style: none; }
    .xlarge-block-grid-11 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-11 > li:nth-of-type(11n+1) {
      clear: both; }

  .xlarge-block-grid-12 > li {
    width: 8.33333%;
    list-style: none; }
    .xlarge-block-grid-12 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-12 > li:nth-of-type(12n+1) {
      clear: both; } }
@media only screen and (min-width: 120.063em) {
  .xxlarge-block-grid-1 > li {
    width: 100%;
    list-style: none; }
    .xxlarge-block-grid-1 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-1 > li:nth-of-type(1n+1) {
      clear: both; }

  .xxlarge-block-grid-2 > li {
    width: 50%;
    list-style: none; }
    .xxlarge-block-grid-2 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-2 > li:nth-of-type(2n+1) {
      clear: both; }

  .xxlarge-block-grid-3 > li {
    width: 33.33333%;
    list-style: none; }
    .xxlarge-block-grid-3 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-3 > li:nth-of-type(3n+1) {
      clear: both; }

  .xxlarge-block-grid-4 > li {
    width: 25%;
    list-style: none; }
    .xxlarge-block-grid-4 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-4 > li:nth-of-type(4n+1) {
      clear: both; }

  .xxlarge-block-grid-5 > li {
    width: 20%;
    list-style: none; }
    .xxlarge-block-grid-5 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-5 > li:nth-of-type(5n+1) {
      clear: both; }

  .xxlarge-block-grid-6 > li {
    width: 16.66667%;
    list-style: none; }
    .xxlarge-block-grid-6 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-6 > li:nth-of-type(6n+1) {
      clear: both; }

  .xxlarge-block-grid-7 > li {
    width: 14.28571%;
    list-style: none; }
    .xxlarge-block-grid-7 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-7 > li:nth-of-type(7n+1) {
      clear: both; }

  .xxlarge-block-grid-8 > li {
    width: 12.5%;
    list-style: none; }
    .xxlarge-block-grid-8 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-8 > li:nth-of-type(8n+1) {
      clear: both; }

  .xxlarge-block-grid-9 > li {
    width: 11.11111%;
    list-style: none; }
    .xxlarge-block-grid-9 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-9 > li:nth-of-type(9n+1) {
      clear: both; }

  .xxlarge-block-grid-10 > li {
    width: 10%;
    list-style: none; }
    .xxlarge-block-grid-10 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-10 > li:nth-of-type(10n+1) {
      clear: both; }

  .xxlarge-block-grid-11 > li {
    width: 9.09091%;
    list-style: none; }
    .xxlarge-block-grid-11 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-11 > li:nth-of-type(11n+1) {
      clear: both; }

  .xxlarge-block-grid-12 > li {
    width: 8.33333%;
    list-style: none; }
    .xxlarge-block-grid-12 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-12 > li:nth-of-type(12n+1) {
      clear: both; } }

Danylo over 5 years ago

Oh, thank you, thats work's!

Mauricio González about 5 years ago

Hello Tomi Tomion!

Do you have the equivalent for the basic x-large grid?

I have the same problem, only not with the block grid, but with x-large-N-columns.

Please Help!

Thank you.

Anders Heivoll about 5 years ago

Just an SCSS version of Tomi's code here for simplicity:

// Add support for xlarge and xxlarge block grid
@for $i from 1 through $block-grid-elements {
  @media #{$xlarge-up} {
    .xlarge-block-grid-#{$i} {
      @include block-grid(
        $per-row: $i
      );
    }
  }

  @media #{$xxlarge-up} {
    .xxlarge-block-grid-#{$i} {
      @include block-grid(
        $per-row: $i
      );
    }
  }
}

Donny Oexman over 4 years ago

Not sure when this was added, but it's now possible to add the xlarge and xxlarge block grid classes by setting the variable $include-xl-html-block-grid-classes (in _settings.scss) to 'true'.