<section class="container">

  <h1>Block Container</h1>
  <p class="float">A troubled floated element</p>
  Some content
  <section class="block">
    <strong>A humble block</strong>, goes under floated element and wraps around floated element
  </section>
  remaining content on on the bottom. Now i'm just filling some space.. Lorem ipsum dolor sit amet.

</section>

<section class="container">

  <h1>Grid Container</h1>

  <p class="float">A troubled floated element</p>
  Some content
  <section class="grid block-grid">
    <div>I</div>
    <div>Am</div>
    <div>Block</div>
    <div>Grid</div>
  </section>
  remaining content on on the bottom. Our grid container did not went under the floated element like the block element.
</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);
}

/* Block styles */
.block {
  border: 2px solid var(--tomato);
  background: var(--corn);
  border-radius: 1em;
  padding: 1em;
  box-sizing: border-box;
}

.float {
  margin: 0;
  max-width: 20ch;
  float: left;
  width: fit-content;
  border: 2px solid var(--corn);
  color: var(--corn);
  background: var(--tomato);
  border-radius: 1em;
  padding: 1em;
  box-sizing: border-box;
}

/* Grid styles */
.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.