MrMurphy: Grid - Spaltenbreiten limitieren

Beitrag lesen

SELF-Forum

Grid - Spaltenbreiten limitieren

MrMurphy
– Informationen zu den Bewertungsregeln

Ich habe mal ein Beispiel zum Ausprobieren und Rumspielen erstellt.

Dabei habe ich der linken Spalte eine Maximalbreite zugewiesen.

Bei schmalen Fenstern erfolgt die Anzeige einspaltig. Aber einer Breite von 800px erfolgt eine zweispaltige Darstellung, wobei die beiden Spalten gleich breit sind. Wenn die linke Spalte ihre Maximalbreite erreicht wächst nur noch die rechte Spalte.


<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Grid mit minmax</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
   /* Basisangaben */
   @media all {
      * {
         box-sizing: border-box;
         min-width: 1px;
      }
      html {
      }
      body {
         max-width: 1400px;
         margin: 1rem auto 2rem auto;
      }
   }

   /* Schriften */
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dt, dd, address {
         font-family: sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
   }

   /* Grafiken */
   @media all {
      figure {
         text-align: center;
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
         display: inline-block;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0px;
      }
      figcaption {
         text-align: left;
         display: inline-block;
      }
   }

   /* Listen dl */
   @media all {
      dl {
      }
      dt {
         font-weight: bold;
         margin: 0.5rem 0rem 0rem 0rem;
      }
      dd {
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /* main */
   @media all {
      main {
         display: grid;
      }
      figure {
         max-width: 600px;
         margin: 0rem auto 0rem auto;
         display: grid;
      }
      img {
         grid-column-start: 1;
         grid-row-start: 1;
      }
      figcaption {
         background-color: hsla(207, 44%, 49%, 0.8);
         color: white;
         font-size: 1.4rem;
         font-weight: bold;
         padding: 0rem 0.5rem 0rem 0.5rem;
         justify-self: center;
         align-self: end;
         grid-column-start: 1;
         grid-row-start: 1;
      }
      .information {
         margin: 1rem 1rem 1rem 1rem;
      }
   }
   @media only screen and (min-width: 800px) {
      main {
         grid-template-columns: minmax(100px, 600px) minmax(100px, max-content);
         gap: 0.5rem;
      }
      figure {
         background-color: khaki;
         margin: 1rem 0rem 1rem 0rem;
      }
      section {
         background-color: linen;
      }
   }

   </style>
</head>
<body>
   <main>
      <div>
         <figure>
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Digital_design_of_woman_from_late_1980s_or_early_1990s.jpg" alt="Frau mit Telefon">
            <figcaption>Miss Management 1995</figcaption>
         </figure>
      </div>
      <section class="information">
         <h1>NYC Nr. 999</h1>
         <p>Die Dampflokomotive Nr. 999 der New York Central & Hudson River Railroad gilt als das erste Fahrzeug, das eine Geschwindigkeit von 100 mph (etwa 161 km/h) überschritten hat.</p>
         <p>Auf der 1893 durchgeführten Rekordfahrt der speziell für diesen Zweck gebauten Lokomotive wurden sogar 112 mph (181 km/h) gemessen, was auch außerhalb von Eisenbahner-Kreisen weltweites Aufsehen erregte. Allerdings bezweifeln Fachleute, dass diese Geschwindigkeit tatsächlich erreicht wurde.</p>
         <p>Im Jahr 1891 wurde auf der 702 km langen Strecke zwischen New York City und Buffalo ein neuer Zug eingeführt, der Empire State Express. Um die konkurrierende Pennsylvania Railroad im Vorfeld der World’s Columbian Exposition, der Weltausstellung in Chicago, werbewirksam zu schlagen, kam George H. Daniels, der Verantwortliche der Bahngesellschaft für den Personenverkehr, auf die Idee, mit dem Zug eine Rekordfahrt durchzuführen. Er plante die Überschreitung der „magischen“ 100-mph-Grenze (161 km/h), was als gewagtes Vorhaben galt, weil diese Geschwindigkeit um etwa ein Drittel über der normalen Höchstgeschwindigkeit des Zuges lag und es keine Erfahrungen in diesem Geschwindigkeitsbereich gab.</p>
         <p>Originaltext: <a href="https://de.wikipedia.org/wiki/NYC_Nr._999">https://de.wikipedia.org/wiki/NYC_Nr._999</a></p>
         <dl>
            <dt>Name</dt>
            <dd>Rolf B.</dd>
            <dt>Geburtstag</dt>
            <dd>37.14.1954</dd>
            <dt>Telefon</dt>
            <dd>+49-123 456789</dd>
            <dt>E-Mail</dt>
            <dd>info@rolf_b.com</dd>
            <dt>Adresse</dt>
            <dd>47471 Entenhausen</dd>
         </dl>
         <p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2025/may/09/grid-spaltenbreiten-limitieren/1819881#m1819881">https://forum.selfhtml.org/self/</a></p>
         <p>Beispielseite von Rolf B: <a href="https://jsfiddle.net/e8w6bq7g/">https://jsfiddle.net/e8w6bq7g/</a></p>
      </section>
   </main>
</body>
</html>
Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
–
Informationen zu den Bewertungsregeln