2 Boxen nebeneinander, wobei sich Box 1 in der Breite automatisch an der Breite der 2. Box orientieren soll
bearbeitet vonServus!
> 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...
>
> ~~~CSS
> #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/](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](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/classList) eine neue Klasse gibt, die folgenden Regelsatz enthält.
~~~CSS
.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](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Layout_mit_Flexbox) machen:
~~~HTML
<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`](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox/flex#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
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun:
*[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}