Finally Understanding The Usefulness Of CSS Subgrid In Just 10 Minutes

Try it yourself in our playground

Follow along with the tutorial, or just play around with the code. PRO members can fork this code and save it to their account.

Jeroen Reumkens PRO

CSS Subgrid has many use cases that aren't obvious at first. This demo shows you how you can use it to ensure different rows in a pricing table are aligned.

1
export const App = () => {
2
  return (
3
    <>
4
      <p className="scrollable-msg">
5
        You window is smaller than 1200px, therefore the cards have a horizontal
6
        scroll. This way you can still see what the cards side by side look
7
        like.
8
      </p>
9
      <div className="make-scrollable">
10
        <div className="pricing">
11
          <div className="card">
12
            <h2>Raycast</h2>
13
            <p>Free forever. Really really forever. Trust us.</p>
14
            <div className="monthly-price">
15
              <span>$0</span> / month
16
            </div>
17
            <div className="annual-price"></div>
18
            <ol>
19
              <li>
20
                <Check />
21
                Core features, including: Clipboard History, Quicklinks,
22
                Calculator.
23
              </li>
24
              <li>
25
                <Check />
26
                Thousands of extensions
27
              </li>
28
              <li>
29
                <Check />
30
                Custom Extensions
31
              </li>
32
              <li>
33
                <Check />
34
                Developer Tooling
35
              </li>
36
            </ol>
37

38
            <a href="#">Download</a>
39
          </div>
40

41
          <div className="card">
42
            <h2>Raycast PRO</h2>
43
            <p>A bit less free</p>
44
            <div className="monthly-price">
45
              <span>$8</span> / month
46
            </div>
47
            <div className="annual-price">
48
              <span>$96 billed annually</span>
49
            </div>
50
            <ol>
51
              <li>
52
                <Check />
53
                Raycast AI
54
              </li>
55
              <li>
56
                <Check />
57
                Cloud Sync
58
              </li>
59
              <li>
60
                <Check />
61
                Custom Themes
62
              </li>
63
              <li>
64
                <Check />
65
                Unlimited Clipboard History
66
              </li>
67
              <li>
68
                <Check />
69
                Translator
70
              </li>
71
              <li>
72
                <Check />
73
                Custom Window Management Commands
74
              </li>
75
              <li className="soon">
76
                <DotDotDot />
77
                More coming soon
78
              </li>
79
            </ol>
80

81
            <a href="#">Download</a>
82
          </div>
83

84
          <div className="card">
85
            <h2>Team PRO</h2>
86
            <p>AI for the whole team!</p>
87
            <div className="monthly-price">
88
              <span>$12</span> / month
89
            </div>
90
            <div className="annual-price">
91
              <span>$144 billed annually</span>
92
            </div>
93
            <ol>
94
              <li>
95
                <Check />
96
                Everything in PRO
97
              </li>
98
              <li>
99
                <Check />
100
                Unlimited Shared Commands
101
              </li>
102
              <li>
103
                <Check />
104
                Unlimited Shared Snippets
105
              </li>
106
              <li>
107
                <Check />
108
                Unlimited Shared Quicklinks
109
              </li>
110
              <li>
111
                <Check />
112
                Unlimited Team Members
113
              </li>
114
              <li className="soon">
115
                <DotDotDot />
116
                More coming soon
117
              </li>
118
            </ol>
119

120
            <a href="#">Download</a>
121
          </div>
122
        </div>
123
      </div>
124
    </>
125
  );
126
};
127

128
const Check = () => (
129
  <svg
130
    xmlns="http://www.w3.org/2000/svg"
131
    fill="none"
132
    viewBox="0 0 16 16"
133
    width="16"
134
  >
135
    <path
136
      stroke="currentColor"
137
      strokeLinecap="round"
138
      strokeLinejoin="round"
139
      strokeWidth="1.5"
140
      d="M10.25 5.75s-2.385 2.54-3 4.5l-1.5-1.5m8.5-.75a6.25 6.25 0 1 1-12.5 0 6.25 6.25 0 0 1 12.5 0Z"
141
    ></path>
142
  </svg>
143
);
144

145
const DotDotDot = () => (
146
  <svg
147
    xmlns="http://www.w3.org/2000/svg"
148
    fill="none"
149
    viewBox="0 0 16 16"
150
    width="16"
151
  >
152
    <circle cx="8" cy="8" r="1.5" fill="currentColor"></circle>
153
    <circle cx="12.5" cy="8" r="1.5" fill="currentColor"></circle>
154
    <circle cx="3.5" cy="8" r="1.5" fill="currentColor"></circle>
155
  </svg>
156
);

1
:root {
2
  --black: hsl(220, 18%, 3%);
3
  --white: hsl(0, 0%, 100%);
4
  --white-transparent: hsla(0, 0%, 100%, 0.06);
5

6
  font-family: monospace;
7
  font-size: 62.5%;
8
  padding: 1.2rem 2.4rem;
9
  border-radius: 0.8rem;
10
}
11

12
.pricing {
13
  padding: 1.5rem 0;
14
  display: grid;
15
  grid-template-columns: repeat(3, minmax(0, 1fr));
16
  grid-template-rows: repeat(4, auto) 1fr auto;
17
  gap: 0.75rem 0;
18
  max-width: 1200px;
19
}
20

21
.card {
22
  display: grid;
23
  grid-template-rows: subgrid;
24
  grid-row: span 6;
25
  border-radius: 1.2rem;
26
  padding: 3rem;
27
  color: var(--white);
28
  border: 1px solid var(--white-transparent);
29
  font-size: 1.6rem;
30
  box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.1);
31
  background: var(--black);
32
}
33

34
.card:nth-child(2) {
35
  transform: scale(1.05);
36
}
37

38
/* Styles for card elements: */
39

40
.card h2,
41
.card p {
42
  margin: 0;
43
}
44

45
.card ol {
46
  list-style-type: none;
47
  padding: 0;
48
  margin: 0;
49
}
50

51
.card li {
52
  margin-bottom: 1.2rem;
53
  display: flex;
54
  align-items: start;
55
  gap: 0.3rem;
56
  line-height: 1.5;
57
}
58

59
.card ol svg {
60
  margin-right: 0.75rem;
61
  flex-shrink: 0;
62
  align-self: baseline;
63
  top: 0.4rem;
64
  position: relative;
65
}
66

67
.card .soon {
68
  color: hsla(0, 0%, 100%, 0.6);
69
}
70

71
.card .soon svg {
72
  align-self: center;
73
  top: 0;
74
}
75

76
.card a {
77
  background-color: var(--white);
78
  color: var(--black);
79
  padding: 0.75rem 1.5rem;
80
  border-radius: 0.8rem;
81
  text-decoration: none;
82
  margin-top: 1.5rem;
83
  display: block;
84
  text-align: center;
85
}
86

87
.card .monthly-price {
88
  display: flex;
89
  align-items: center;
90
  gap: 0.75rem;
91
}
92

93
.card .monthly-price span {
94
  font-size: 6rem;
95
  font-weight: 700;
96
}
97

98
.card .annual-price {
99
  font-size: 1.4rem;
100
  color: hsla(0, 0%, 100%, 0.6);
101
  text-align: center;
102
  min-height: 30px;
103
  display: flex;
104
  align-items: center;
105
  justify-content: center;
106
  background-image: linear-gradient(
107
    to bottom,
108
    transparent,
109
    transparent 50%,
110
    hsla(0, 0%, 100%, 0.1) 50%,
111
    hsla(0, 0%, 100%, 0.1) calc(50% + 1px),
112
    transparent calc(50% + 1px)
113
  );
114
}
115

116
.card .annual-price span {
117
  background: var(--black);
118
  display: block;
119
  padding: 0 0.6rem;
120
  max-width: 70%;
121
}
122

123
/* These divs is only there so even on mobile the
124
columns are side by side for you to see the effect. */
125
.scrollable-msg {
126
  display: none;
127
  color: var(--white);
128
  text-align: center;
129
  font-size: 1.4rem;
130
}
131
@media screen and (max-width: 1200px) {
132
  .scrollable-msg {
133
    display: block;
134
  }
135
}
136
.make-scrollable {
137
  overflow-x: auto;
138
  overflow-y: clip;
139
}
140
.make-scrollable .pricing {
141
  min-width: 1200px;
142
}

In this tutorial we will dive into the world of CSS Subgrid. Quite a new CSS feature, that is already supported in all major browsers! Yet it is a feature that I don’t see that often being used in the wild. Perhaps because it’s use cases aren’t clear right away. In this video I will show you how to use CSS Subgrid and why it is so useful.