360Giving Design System - Components

Grid: Five Columns 

<section class="grid grid--five-columns">
    <div class="grid__1">
        <p>Grid Item</p>
    </div>
    <div class="grid__1">
        <p>Grid Item</p>
    </div>
    <div class="grid__1">
        <p>Grid Item</p>
    </div>

    <div class="grid__1">
        <p>Grid Item</p>
    </div>

    <div class="grid__1">
        <p>Grid Item</p>
    </div>
</section>
 
<section class="grid grid--five-columns">
    <div class="grid__1">
        <p>Grid Item</p>
    </div>
    <div class="grid__1">
        <p>Grid Item</p>
    </div>
    <div class="grid__1">
        <p>Grid Item</p>
    </div>

    <div class="grid__1">
        <p>Grid Item</p>
    </div>

    <div class="grid__1">
        <p>Grid Item</p>
    </div>
</section>
 
/* No context defined. */
  • Content: 
    .grid {
  @include wrapper;


  @include breakpoint($medium) {
    display: grid;
    grid-gap: 16px;
    grid-auto-rows: auto;
    grid-auto-flow: row;
    grid-gap: 32px;
  }

  &--two-columns {
    @include breakpoint($medium) { grid-template-columns: repeat(2, 1fr); }
  }
  &--three-columns {
    @include breakpoint($medium) { grid-template-columns: repeat(3, 1fr); }
  }
  &--four-columns {
    @include breakpoint($medium) { grid-template-columns: repeat(4, 1fr); }
  }
  &--five-columns {
    @include breakpoint($medium) { grid-template-columns: repeat(5, 1fr); }
  }
  &--six-columns {
    @include breakpoint($medium) { grid-template-columns: repeat(6, 1fr); }
  }
  &--seven-columns {
    @include breakpoint($medium) { grid-template-columns: repeat(7, 1fr); }
  }

  &__2 { grid-column: auto / span 2; }
  &__3 { grid-column: auto / span 3; }
  &__4 { grid-column: auto / span 4; }
  &__5 { grid-column: auto / span 5; }
  &__6 { grid-column: auto / span 6; }
  &__7 { grid-column: auto / span 7; }
  &__all { grid-column: 1 / -1; }

  &.max-width__100 {
    max-width: 100%;
  }
}
  • URL: /components/raw/grid/grid.scss
  • Filesystem Path: src/components/04-modules/grid/grid.scss
  • Size: 1.1 KB

This is the draft of an internal Grid system, to be nested in the main content area of the Layout Module.

It has two variants:

.grid.grid--two-columns This renders a two column layout in the section.

.grid.grid--three-columns This renders a three column layout in the section.

In both layout variants, we can use the following classes in the child elements to control column span

.grid__1
.grid__2   # Spans 2 columns
.grid__3   # Spans 3 columns
.grid__all # Spans all columns