O-in-U (Grid)

Like the O-in-O pattern, this demonstrates the power of Grid’s auto-placement algorithm. The “1” box is the only item I’ve placed in a specific area of the grid. All the others flow naturally around it based on their HTML source order. Furthermore, the HTML is minimal: no extra wrappers are required to achieve multiple columns and rows.

The Finished Example Layout

1
2
3
4
5
6
7
8
9
10
11
12

The Code

HTML
  <div class="OinU">
    <div class="OinU__feature">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
  </div>


CSS
/* Grid
-------------------------------------- */
/* Define the grid */
.OinU {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 1fr);
}

/* Place item on the grid */
.OinU__feature {
  grid-column: 2 / span 3;
  grid-row: 1 / span 3;
}

/* Generic styles for demo purposes
-------------------------------------- */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.OinU {
  font-family: Helvetica, Arial, sans-serif;
  max-width: 75rem;
}

.OinU > * {
  background-color: #ccc;
  padding: 1em;
  min-height: 100px;
}