SO-74559279

by David Thomas

HTML

<main>
  <h4>Unsere Immobilien</h4>
  <ul>
    <li>
      <figure>
        <a href="#">
          <img src="//placekitten.com/300/200" alt="Beschreibung Haus2">
        </a>
        <figcaption>PlaceKitten image: 1</figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <a href="#">
          <img src="//placekitten.com/300/200" alt="Beschreibung Haus3">
        </a>
        <figcaption>PlaceKitten image: 2</figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <a href="#">
          <img src="//placekitten.com/300/200" alt="Beschreibung Haus4">
        </a>
        <figcaption>PlaceKitten image: 3</figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <a href="#">
          <img src="//placekitten.com/300/200" alt="Beschreibung Haus5">
        </a>
        <figcaption>PlaceKitten image: 4</figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <a href="#">
          <img src="//placekitten.com/300/200" alt="Beschreibung Haus6">
        </a>
        <figcaption>PlaceKitten image: 5</figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <a href="#">
          <img src="//placekitten.com/300/200" alt="Beschreibung Haus6">
        </a>
        <figcaption>PlaceKitten image: 6</figcaption>
      </figure>
    </li>
  </ul>
</main>

CSS

/* CSS custom properties used to provide common theming
   to multiple elements: */
:root {
  --commonSpacing: 1em;
}

/* a simple CSS reset to remove default margins,
   and padding; ensuring all browsers use the
   same sizing algorithm for content, and also
   applying the same font-size and font-family: */
*,
::before,
::after {
  box-sizing: border-box;
  font-family: system-ui;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

main {
  /* setting the size of the inline axis (width, in English and
     Latin languages) to 80 viewport width units, with a minimum
     size of 30 root-em units, and a maximum size of 1300 pixels: */
  inline-size: clamp(30rem, 80vw, 1300px);
  /* centering the element on the inline axis: */
  margin-inline: auto;
}

/* to emphasise the heading: */
h4 {
  font-size: 1.8em;
  margin-block: calc(0.5 * var(--commonSpacing));
  text-align: center;
}

ul {
  /* using grid layout: */
  display: grid;
  /* spacing adjacent elements: */
  gap: var(--commonSpacing);
  /* defining two columns, each taking one fraction of
     the available space: */
  grid-template-columns: repeat(2, 1fr);
  list-style-type: none;
  text-align: center;
}

JavaScript

const create = (tag, props) => Object.assign(document.createElement(tag), props),
			get = (selector, context = document) => context.querySelector(selector),
      getAll = (selector, context = document) => [...context.querySelectorAll(selector)],
      list = get('ul');