Flex Layout Example - Grid Layout

# Flex Layout Example - Grid Layout

You can use F12 developer tools to inspect elements and styles, or open CodePen to edit the code online.

<html>
  <div class="grid">
    <div class="grid-cell">1/2</div>
    <div class="grid-cell">1/2</div>
  </div>

  <div class="grid">
    <div class="grid-cell">1/3</div>
    <div class="grid-cell">1/3</div>
    <div class="grid-cell">1/3</div>
  </div>

  <div class="grid">
    <div class="grid-cell">1/4</div>
    <div class="grid-cell">1/4</div>
    <div class="grid-cell">1/4</div>
    <div class="grid-cell">1/4</div>
  </div>

  <div class="grid text">
    <div class="grid-cell">
      Height follows the element on the right
    </div>
    <div class="grid-cell">
      Content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler
    </div>
  </div>

  <h4>Setting percentage width for a grid cell</h4>
  <div class="grid">
      <div class="grid-cell u-full">100%</div>
  </div>
  <div class="grid">
      <div class="grid-cell u-1of2">50%</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
  </div>
  <div class="grid">
      <div class="grid-cell u-1of3">33.33%</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
  </div>
  <div class="grid">
      <div class="grid-cell u-1of4">25%</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
  </div>
</html>
<style>
  .grid {
    display: flex;
  }
  .grid-cell {
    flex: 1;
  }
  .grid-cell.u-full {
    flex: 0 0 100%;
  }
  .grid-cell.u-1of2 {
    flex: 0 0 50%;
  }
  .grid-cell.u-1of3 {
    flex: 0 0 33.3333%;
  }
  .grid-cell.u-1of4 {
    flex: 0 0 25%;
  }
  /* Base styles */
  .grid-cell {
    background: #eee;
    text-align: center;
    margin: 5px;
    padding: 10px 0;
  }
  .text .grid-cell {
    text-align: left
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

Reference: http://www.ruanyifeng.com/blog/2015/07/flex-examples.html (opens new window)

Edit

Last Updated: 2026/03/21, 12:14:36

← Flex Layout Example - Holy Grail Layout Flex Layout Example - Input Layout→

Recent Updates

01
How I Discovered Disposable Email — A True Story 06-12

02
Animations in Grid Layout 09-15

03
Renaming a Git Branch 08-11

More Articles >