<section class="container">

  <h1>Block level Grid</h1>

  Some content on the top and then
  <section class="grid block-grid">
    <div>I</div>
    <div>Am</div>
    <div>Block</div>
    <div>Grid</div>
  </section>
  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>

<section class="container">

  <h1>Inline level Grid</h1>

  Hello there,
  <section class="grid inline-grid">
    <div>I</div>
    <div>Am</div>
    <div>Inline</div>
    <div>Grid</div>
  </section>
  Hello Hello.. And this is what happens when there is long text that is going to wrap to the next line.
</section>
: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.