CSS: Nutze ich hier display flex or ein Grid System?

4 Antworten

HermCrafter
11.11.2021, 21:16

Guten Abend,

Ich persönlich arbeite relativ gerne mit Flexbox.

Daher würde ich wie folgt vorgehen:

  1. Einen Hauptcontainer erstellen
  2. im Hauptcontainer 3 weitere Container in der Reihe nebeneinander anordnen (der linke Container enthält die linke Card, der mittlere die beiden mittleren sowie der rechte die rechte Card)

Der Hauptcontainer ist für die vertikale Zentrierung der Cards verantwortlich, daher gilt unter Zuhilfenahme des Flexbox-Systems:

#main-container {
  display: flex;
  align-items: center;
}

Ich habe es nicht ausprobiert, aber damit sollte es funktionieren.

LG
Paul051104  
Fragesteller
 11.11.2021, 21:18

Das klingt wunderbar, so werde ich's machen.

Großen Dank! :)

1
medmonk
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Technik
12.11.2021, 07:40

HTML (Grundgerüst):

<section>
  <header>
    <h2>section title</h2>
    <p>some text...</p>
  </header>
  <div class="d-flex flex-ai-c">
    <div class="column">
      <article class="card">...</article>
    </div>
    <div class="column">
      <article class="card">...</article>
      <article class="card">...</article>
    </div>
    <div class="column">
      <article class="card">...</article>
    </div>
  </div>
</section>

HTML (Card):

<article class="card card--modifier">
  <div class="box">
    <h3 class="card__title">title</h3>
    <p>some text...</p>
  </div>
</article>

CSS:

:root {
  --clr-supervisor:   hsl(175, 35%, 95%);
  --clr-team-builder: hsl(350, 70%, 95%);
  --clr-karma:        hsl( 38, 70%, 95%);
  --clr-calculator:   hsl(205, 65%, 95%);
}

*, *::before, *::after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}

html {
  font-size: 100%;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

/* helper classes */
.d-flex {
  display: flex;
  gap: var(--gap, 1rem);
}

.flex-ai-c {
  align-items: center; 
}

/* cards */
.card {
  width: 320px; 
  height: 230px;
  position: relative;
  overflow: hidden;
  background-color: var(--bg-card, #fff);
  box-shadow: 0 8px 15px hsl(205 5% 90% / 1);
  border-radius: 10px;
  transform: translateY(0rem);
  transition: all 280ms ease;
}

.card:not(:last-child) {
  margin-bottom: var(--gap, 1rem);
}

.card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 15px 15px hsl(205 5% 87% / 1);
}

.card::before {
  content: "";
  width: 100%; 
  height: 5px;
  position: absolute;
  top: 0;
  background-color: var(--card-top-border, transparent);
}

.card--supervisor::before {
  --card-top-border: var(--clr-supervisor);
}

.card--team-builder::before {
  --card-top-border: var(--clr-team-builder);
}

.card--supervisor::karma {
  --card-top-border: var(--clr-karma);
}

.card--calculator::before {
  --card-top-border: var(--clr-calculator);
}

.box {
  margin: 1.2rem 1.45rem;
}

LG medmonk

Babelfish
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Technik, HTML
11.11.2021, 21:19

Da gibt es kein das oder das. Man kann und sollte beides nutzen. CSS Grid ist besonders gut fürs grobe Layout wie Header, Sidebars, Main und Footer. Flexbox hat dann bei allen enthaltenen Elementen seine Stärken und wird meist für die Inhalte und UI-Elemente verwendet.
Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.
EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
12.11.2021, 09:26
Mal angenommen ihr programmiert das Design nach. Wie geht ihr vor?

so:

<!DOCTYPE html>
<title>flex box</title>
<style>
body {
    background:#eee
    }
main {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
}
section {
    width:33.3%;
}
article {
    background:white;
    padding:1em;
    margin:1em
}
</style>
<main>
    <section>
        <article>
            <h2>Supervisor</h2>
            <p> ... Text ...</p>
        </article>
    </section>
    <section>
        <article>
            <h2>Team Builder</h2>
            <p> ... Text ...</p>
        </article>
        <article>
            <h2>Karma</h2>
            <p> ... Text ...</p>
        </article>
    </section>
    <section>
        <article>
            <h2>Calculator</h2>
            <p> ... Text ...</p>
        </article>
    </section>
</main>

Alex