Use grid to create a grid container, then choose its columns and gap. Responsive variants apply the same utility only when a media-query condition matches.
Version and setup
These examples are compiled with Tailwind CSS 3.3.2. Copy document includes the required CSS, so that document runs without a Tailwind installation. To use the utility classes in a project, follow the versioned setup guide.
This site customizes its spacing scale: p-10 is 10px here, while standard Tailwind 3 uses 2.5rem. The examples below use unaffected spacing keys or explicit arbitrary values. Check your project configuration before assuming a utility’s size. Tailwind 4 has a different setup; use its official installation guide for a new version-4 project.
Three equal tracks
Tailwind CSS 3.3.2; the CSS tab includes the compiled styles.
HTML
<div class="grid grid-cols-3 gap-4">
<div class="p-4 bg-blue-100">HTML</div>
<div class="p-4 bg-blue-100">CSS</div>
<div class="p-4 bg-blue-100">Testing</div>
</div>CSS
*,
::before,
::after {
box-sizing: border-box;
border: 0 solid #e5e7eb;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
a {
color: inherit;
text-decoration: inherit;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
.grid {
display: grid;
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gap-4 {
gap: 1rem;
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
grid-cols-3 creates repeat(3, minmax(0, 1fr)), and gap-4 adds 1rem between tracks in this setup. The zero minimum helps tracks share the space, but long unbreakable content can still overflow its item.
Change columns at wider viewports
Tailwind CSS 3.3.2; the CSS tab includes the compiled styles.
HTML
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="p-4 bg-blue-100">One</div>
<div class="p-4 bg-blue-100">Two</div>
<div class="p-4 bg-blue-100">Three</div>
<div class="p-4 bg-blue-100">Four</div>
</div>CSS
*,
::before,
::after {
box-sizing: border-box;
border: 0 solid #e5e7eb;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
a {
color: inherit;
text-decoration: inherit;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
.grid {
display: grid;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.gap-4 {
gap: 1rem;
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
}
@media (min-width: 768px) {
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
For the unchanged Tailwind 3 defaults here, md starts at 768px and lg at 1024px. Base classes apply at every size unless another matching rule overrides them. They do not mean “phone only.” Copy the document and resize its viewport to cross those thresholds; the embedded frame has its own viewport.
Choose breakpoints from the content, and test wrapping and zoom. Compare native grid-template-columns and responsive breakpoints.
Sources
Reference 1 Reference 2 Reference 3 provide the technical details and current compatibility information.