Column grid

View in Github

Just testing the waters of a tiny grid helper. For now, used on photo grids and in AMP templates. By default the grid is an even two column grid. We include variations for col counts and spacing.

.l-col-grid

<div class="l-col-grid  t-align-center">
  <div class="has-padding has-bg-white-off">1</div>
  <div class="has-padding has-bg-white-off">2</div>
  <div class="has-padding has-bg-white-off">3</div>
  <div class="has-padding has-bg-white-off">4</div>
  
</div>

Repo	Count	Location(s)
texastribune	9	List _col-grid.scss grid.html socials.html raw__amp.html tag_detail.html tag_list.html index.html donors_and_members.html amp_base.html
feature-general-ballot-2020-08	1	List RelatedContent.js
feature-voter-guide-general-2020-08	1	List RelatedContent.js
data-visuals-create	1	List RelatedContent.js
mailchimp-email-templates	2	List index.html index.html
state-salaries-draft	3	List agency_list.html agency_detail.html index.html

.l-col-grid--1x3

Columns split in thirds

<div class="l-col-grid l-col-grid--1x3 t-align-center">
  <div class="has-padding has-bg-white-off">1</div>
  <div class="has-padding has-bg-white-off">2</div>
  <div class="has-padding has-bg-white-off">3</div>
  <div class="has-padding has-bg-white-off">4</div>
  
    <div class="has-padding has-bg-white-off">5</div>
    <div class="has-padding has-bg-white-off">6</div>
  
</div>

Repo	Count	Location(s)
texastribune	1	List socials.html
mailchimp-email-templates	2	List index.html index.html
state-salaries-draft	3	List agency_list.html agency_detail.html index.html

.l-col-grid--xxxs-gap

Shrink up the default gap. Used on photo grid

<div class="l-col-grid l-col-grid--xxxs-gap t-align-center">
  <div class="has-padding has-bg-white-off">1</div>
  <div class="has-padding has-bg-white-off">2</div>
  <div class="has-padding has-bg-white-off">3</div>
  <div class="has-padding has-bg-white-off">4</div>
  
</div>

Repo	Count	Location(s)
texastribune	1	List grid.html
mailchimp-email-templates	2	List index.html index.html
state-salaries-draft	3	List agency_list.html agency_detail.html index.html

.l-col-grid--1x1-until-bp-m

Collapse all columns at bp-m

<div class="l-col-grid l-col-grid--1x1-until-bp-m t-align-center">
  <div class="has-padding has-bg-white-off">1</div>
  <div class="has-padding has-bg-white-off">2</div>
  <div class="has-padding has-bg-white-off">3</div>
  <div class="has-padding has-bg-white-off">4</div>
  
</div>

Repo	Count	Location(s)
feature-general-ballot-2020-08	1	List RelatedContent.js
feature-voter-guide-general-2020-08	1	List RelatedContent.js
data-visuals-create	1	List RelatedContent.js
mailchimp-email-templates	2	List index.html index.html
texastribune	2	List grid.html index.html
state-salaries-draft	3	List agency_list.html agency_detail.html index.html