<h1>Contents:</h1>
<ul>
<li>2 Colum grid</li>
<li>2 Colum grid (label/content)</li>
<li>4 Colum grid (label/content | label/content)
<br><i>2 cols in mobile</i>
</li>
<li>3 Colum grid</li>
</ul>
<h2>2 Column Grid (standard 50% widths by default)</h2>
<div class="grid grid-cols-2">
<p>This is column 1/2</p>
<p>This is column 2/2</p>
<p>This is column 1/2</p>
<p>This is column 2/2</p>
</div>
<h2>2 Column Grid (with small labels column)</h2>
<p>
This one has a set of labels on the left and the main content on the right.
</p>
<div class="grid grid-cols-2-max-1fr">
<p>#1 Label</p>
<p>Nobis eius nostrum asperiores enim placeat ipsum. Voluptatem modi qui quia saepe ea eum qui dolores. Fuga accusantium rerum iure consequuntur quo repudiandae blanditiis eos.</p>
<p>#2 label</p>
<p>Nobis eius nostrum asperiores enim placeat ipsum. Voluptatem modi qui quia saepe ea eum qui dolores. Fuga accusantium rerum iure consequuntur quo repudiandae blanditiis eos.</p>
</div>
<h2>4 Column Grid (2 columns with labels - breaks down to 2 columns in mobile)</h2>
<p>
Similar to the previous, only setup for 2 pairs of label/content columns.
</p>
<div class="grid grid-cols-4-max-1fr">
<p>#1 Label</p>
<p>Nobis eius nostrum asperiores enim placeat ipsum. Voluptatem modi qui quia saepe ea eum qui dolores. Fuga accusantium rerum iure consequuntur quo repudiandae blanditiis eos.</p>
<p>#2 label</p>
<p>Nobis eius nostrum asperiores enim placeat ipsum. Voluptatem modi qui quia saepe ea eum qui dolores. Fuga accusantium rerum iure consequuntur quo repudiandae blanditiis eos.</p>
<p>#1 Label</p>
<p>Nobis eius nostrum asperiores enim placeat ipsum. Voluptatem modi qui quia saepe ea eum qui dolores. Fuga accusantium rerum iure consequuntur quo repudiandae blanditiis eos.</p>
<p>#2 label</p>
<p>Nobis eius nostrum asperiores enim placeat ipsum. Voluptatem modi qui quia saepe ea eum qui dolores. Fuga accusantium rerum iure consequuntur quo repudiandae blanditiis eos.</p>
</div>
<h2>3 Column Grid</h2>
<p>
Just because....
</p>
<div class="grid grid-cols-3">
<p>This is column 1/3</p>
<p>This is column 2/3</p>
<p>This is column 3/3</p>
<p>This is column 1/3</p>
<p>This is column 2/3</p>
<p>This is column 3/3</p>
</div>
.grid p {
background: #bfbfbf;
padding: 10px;
margin: 0;
}
.grid {
display: grid;
grid-gap: 20px;
}
.grid-cols-2 {
grid-template-columns: 1fr 1fr;
}
.grid-cols-2-max-1fr {
grid-template-columns: max-content 1fr;
}
.grid-cols-3 {
grid-template-columns: 1fr 1fr 1fr;
}
.grid-cols-4-max-1fr {
grid-template-columns: max-content 1fr max-content 1fr;
}
@media (max-width: 800px), (max-device-width: 800px) {
.grid-cols-4-max-1fr {
grid-template-columns: max-content 1fr;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.