O-in-O

Like the O-in-U pattern, this demonstrates the power of Grid’s auto-placement algorithm. The “7” box is the only item I’ve placed in a specific area of the grid, telling it to start in row 2, column 2, and be 3x3. All the other items flow naturally around it based on their HTML source order.

Note that I could have set class="OinO__feature" on any of the items to make them appear where the “7” box does, without reordering the HTML. Display re-ordering is a powerful feature of Grid, but be careful when you wield it, because keyboard-tabbing and screen readers still go by the HTML source order. This means some users may get disoriented if the display order doesn’t align with the source order.

Rachel Andrew and others explain further in “CSS Grid Layout and Accessibility,” and Rob Dodson demonstrates the issue in his short video “Does reordering content affect accessibility?”

The Finished Example Layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

The Code

HTML
<div class="OinO">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div class="OinO__feature">7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
</div>


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

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

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

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

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

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