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;
}

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

ul {
  /* using multi-column layout,
     ensuring two columns: */
  column-count: 2;
  /* removing default list-markers: */
  list-style-type: none;
  /* centering the <figure> elements
  within the <li>: */
  text-align: center;
}

li {
  /* ensuring that the <li> doesn't have
     its contents spread over columns,
     leaving unsightly orphans at the
     end, or beginning, of a column: */
  break-inside: avoid;
  /* spacing the elements out: */
  margin-block-end: var(--commonSpacing);
}

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');