2 Boxen nebeneinander, wobei sich Box 1 in der Breite automatisch an der Breite der 2. Box orientieren soll

[Matthias Scharwies]

Servus!

Hi,

ich habe gerade einige Videos über grid geguckt und es scheint eine echte Erleichterung zu sein, wenn man es dann mal wirklich verstanden hat.

Um bei dem Beispiel zu bleiben, wenn man #box2 über einen Button ausblenden würde und man verwendet diesen Code...

#screen {
  display: grid;
  grid-template-columns: 3fr 1fr;    
} 

...dann bleibt die Aufteilung so bestehen, also das erste Element #box1 nimmt 3fr der Fläche ein und #box2 1fr, obwohl die Box gar nicht mehr eingeblendet wird. Ist es möglich, wenn #box2 ausgeblendet ist sich #box1 automatisch über die gesamte Breite erstreckt?

https://jsfiddle.net/s9gjwu9u/36/

Du würdest das mit Javascript ausblenden?

Mir fällt jetzt grad nur ein, dass man #box1 dann mit classList.add eine neue Klasse gibt, die folgenden Regelsatz enthält.

.ganzeSeite {
  grid-column: 1 / 3;
}

Der Vorteil von grid ist, dass man mit einer Festlegung für das Elternelement oft schon das gesamte Layout bestimmt und die einzelnen Kindelemente nur noch feintunen muss.

---

Das würde ich dann doch mit Flexbox machen:

<style>
.parent {
    display: flex;
}
#box1 {
    flex-grow: 1;
		background: green;
}
	
#box2 {
		background: blue;
		/* display: none; */
}
</style>

<div class="parent">  
  <div id="box1">box1</div>
  <div id="box2">box2</div>
</div>  

Das Elternelement wird mit display: flex; zum Flex-Container. flex-grow bestimmt, wie viel Platz das Element erhält. Wenn #box1 ausgeblendet ist, dann ist das die gesamte Breite.

#box2 kannst du jetzt eine absoluten (oder prozentuale) Breite geben (solltest Du aber imho nicht), oder einfach ein padding um den vorhandenen Inhalt geben.

Hier ganz kurz und übersichtlich:

2 Columns Layout with Flexbox

Herzliche Grüße

Matthias Scharwies