<section class="container">

  <h1>Block level Grid</h1>

  Some content on the top and then
  <section class="grid block-grid">
  remaining content on a separate line. Since block grid takes the complete horizontal space just like a regular <code>div</code> and other block level elements.


<section class="container">

  <h1>Inline level Grid</h1>

  Hello there,
  <section class="grid inline-grid">
  Hello Hello.. And this is what happens when there is long text that is going to wrap to the next line.
:root {
  --violet-blue-crayola: #7776bcff;
  --languid-lavender: #cdc7e5ff;
  --light-yellow: #fffbdbff;
  --corn: #ffec51ff;
  --tomato: #ff674dff;

body {
  background: #faf0e6;

.container {
  background: var(--light-yellow);
  max-width: 40ch;
  margin: 20px auto;
  padding: 2em;
  font-family: "Merriweather", serif;
  border-radius: 1em;
  border: 3px solid var(--tomato);

.inline-grid {
  display: inline-grid;

.block-grid {
  display: grid;

h1 {
  color: var(--tomato);

.grid {
  grid-template-columns: 1fr 1fr;
  width: 100px;
  height: 100px;

.grid > div {
  background: var(--violet-blue-crayola);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;

.grid > div:first-child,
.grid > div:last-child {
  background: var(--tomato);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.