responsive CSS Grid

[Misel]

Huhu, ist hier jemand der sich mit responsive Web Design auskennt und mir auf die Sprünge helfen kann? Ich sehe nicht durch.

Was ich möchte, ist dass die DIVs in diesem Layout sind und wenn ich einen schmaleren Schirm habe, sollen sie nicht mehr nebeneinander sein, sondern untereinander. Das gleiche für die beiden in der mittleren Reihe.



Nach einigem Puzzeln bin ich schon so weit gekommen. Aber das 40em bzw. 60em passt da irgendwie nicht hin. %-Werte helfen nicht, da sie sonst einfach immer nur kleiner werden und in der Reihe bleiben.

Außerdem sind die beiden "halbierten" DIVs in der schmalen Ansicht dann breiter und stehen rechts über.

<style type="text/css">
.gridparent_thirds {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40em, 1fr));
}

.gridparent_halfs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60em, 1fr))
}

.grid_element {
    background-color: white;
    border: 1px solid var(--awingrey);
    padding: 5px;
    margin: 5px;
}
</style>

<h2>Overview</h2>

<div class="gridparent_thirds">
    <div class="account_data grid_element"> foo </div>
    <div class="master_data grid_element"> bar </div>
    <div class="finance_data grid_element"> baz</div>
</div>
<div class="gridparent_halfs">
    <div class="actions grid_element"> moep </div>
    <div class="sanctions grid_element"> bla</div>
</div>
<div class="comments grid_element"> blubb</div>

Habt ihr eine Idee, wie das eleganter geht?

[Labersack]

Du hast vermutlich schon bei w3school geschaut?

Ich bin da kein Experte, habe das aber mal so hinbekommen, dass eine Reihe Buttons notfalls mehrreihig angeordnet werden, das Attribut ist wohl "overflow: auto", siehe https://www.w3schools.com/cssref/pr_pos_overflow.asp

[Mereta]

Das läuft normalerweise über so genannte "media queries", d.h. du fragst i.d.R. die Breite des Screens ab und lieferst bei Unterschreitung ein abgewandeltes Layout.

@media (max-width: 600px) {
Hier das abgewandelte Layout einfügen
}

Das kann beispielweise ein "width: 100%" sein, ein "flex-wrap: wrap" oder auch ein "flex-direction: column". Letzteres sorgt dann dafür, dass Elemente untereinander statt nebeneinander angezeigt werden.

[Misel]

danke, das hat geholfen