Day 5: Split 💔

A split component consists of two elements, usually image and text, sitting next to each other horizontally.

The example component is visible below.

I am Silvestar Bistrović, a fearless web engineer, CSS developer, JAMstack enthusiast, WordPress theme specialist, author of the UI Dev Newsletter, and founder of CSS Auditors.

A few notes about this split component:

• CSS Grid is used for the grid,
• the auto-fill keyword is used to fill the grid columns with items,
• the minmax function is used to declare the minimum and maximum size of the grid item,
• the loading="lazy" attribute is used to notify the browser that the image is not needed immediately.

The code:

<div class="advent-split">
  <img src="/path/to/image.jpg" alt="Context." width="300" height="300" loading="lazy">
  <p>I am Silvestar Bistrović, a fearless web engineer, CSS developer, JAMstack enthusiast, WordPress theme specialist, author of the UI Dev Newsletter, and founder of CSS Auditors.</p>
</div>

.advent-split {
  display: grid;
  grid-gap: 2em;
  place-items: center;
  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
}