Block Grid

Basic Block Grid

Used when a layout has a variable number of alike items that need to be presented in a grid. To get started with the block grid, use a .xs-block-grid-n wrapper (n goes from 1-6), and then give each inner block a class of .block-grid__item. Each grid item is then aligned vertically to the top of its row:

Which Animal Matches Your Personality?

Javier Moreno, 3 weeks ago

Which Dog Are You Really Though?

Javier Moreno, One week ago

Which Animal Matches Your Personality?

Javier Moreno, 3 weeks ago

Which Dog Are You Really Though?

Javier Moreno, One week ago

Which Animal Matches Your Personality?

Javier Moreno, 3 weeks ago

Which Dog Are You Really Though?

Javier Moreno, One week ago

<div class="xs-block-grid-3">
  <div class="block-grid__item">Content goes here.</div>
  <div class="block-grid__item">Content goes here.</div>
  <div class="block-grid__item">Content goes here.</div>
</div>

Responsive Block Grid

The block grid can be made responsive by simply adding Solid's responsive breakpoint prefixes. For instance, if the block grid should be 2 across at the extra small breakpoint, 3 across at medium and 4 across at large, use .xs-block-grid-2 .md-block-grid-3 .lg-block-grid-4:

Which Animal Matches Your Personality?

Javier Moreno, 3 weeks ago

Which Dog Are You Really Though?

Javier Moreno, One week ago

Which Animal Matches Your Personality?

Javier Moreno, 3 weeks ago

Which Dog Are You Really Though?

Javier Moreno, One week ago

Which Animal Matches Your Personality?

Javier Moreno, 3 weeks ago

<div class="xs-block-grid-2 md-block-grid-3 lg-block-grid-4">
  <div class="block-grid__item">Content goes here.</div>
  <div class="block-grid__item">Content goes here.</div>
  <div class="block-grid__item">Content goes here.</div>
</div>

Block Grid Without Gutters

The block grid has gutters by default. These can be removed by adding .no-gutters to the containing block grid element.

Which Animal Matches Your Personality?

Javier Moreno, 3 weeks ago

Which Dog Are You Really Though?

Javier Moreno, One week ago

Which Animal Matches Your Personality?

Javier Moreno, 3 weeks ago

Which Dog Are You Really Though?

Javier Moreno, One week ago

Which Animal Matches Your Personality?

Javier Moreno, 3 weeks ago

Which Animal Matches Your Personality?

Javier Moreno, 3 weeks ago

<div class="xs-block-grid-2 md-block-grid-3 no-gutters">
  <div class="block-grid__item">Content goes here.</div>
  <div class="block-grid__item">Content goes here.</div>
  <div class="block-grid__item">Content goes here.</div>
</div>