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

[Matthias Scharwies]

Servus!

box2 hat eine Breite von 25%, #box1 sollte jetzt automatisch den Rest der Fläche ausfüllen und müsste eine Breite von 75% haben.

#screen {
  display: grid;
  grid-template-columns: 25% 1fr;    /*linke Spalte 25%, rechte übernimmt den Rest */
}

Hätte #box2 eine Breite von 30%, müsste #box1 eine Breite von 30% haben usw.

#screen {
  display: grid;
  grid-template-columns: 1fr 1fr;   /*Beide Spalten sind gleichbreit, verteilen sich auf den verfügbaren Platz */
}

19 von 100 verstehen nichts von Prozentrechnung, aber irgendwie habe ich nicht verstanden, was du willst.

**Wie passt sich #box1 in der Breite immer orientiert an der Breite von #box2 an?

#screen {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(20em, 60em); 
}

Hier hast Du #screen in drei Spalten aufgeteilt; die erste und zweite sind gleichbreit und verteilen den Rest, der nach der Breite der 3.Spalte, die mind. 20em und max. 60em Breite hat, übrigbleibt.

• Wiki: grid

edit: Du willst nur 2 Spalten. Warum sollen die nicht den verfügbaren Raum von #screen einnehmen? Wenn Du rechts einen Rand willst (wozu denn?), dann könntest du die width:100% rausnehmen oder verringern?

Herzliche Grüße

Matthias Scharwies