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 flexbox layout:  */
  display: flex;
  /* shorthand for:
    flex-direction: row;
    flex-wrap: wrap; */
  flex-flow: row wrap;
  /* setting a gap between adjacent elements: */
  gap: var(--commonSpacing);
  /* removing default list-markers: */
  list-style-type: none;
}

li {
  /* allowomg the <li> to expand to take up
     more room: */
  flex-grow: 1;
  /* setting the size of the element to be
     45% of that of the parent; flex-basis
     alwawys refers to the inline-axis of flex-items,
     which can be modified by updating the
     flex-direction of the parent: */
  flex-basis: 45%;
  /* centering the content within the <li>: */
  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');