Jak wsadzić wszystkie boxy do jednego?

Question

Mam polecenie, aby cały box był na 90% szerokości ekranu. Chciałabym to zrobić tak, że te wszystkie boxy będą w jednym, wspólnym boxie i po prostu w nim ustawię width na 90%. Mogę tak zrobić? Jeśli tak, to jak wsadzić te wszystkie boxy do jednego? Naprawdę nie wiem ;/ https://codepen.io/diana-larussa/pen/rNxJvPN

Answer 1

IMO to jest idealny use case dla grida. Tworzysz siatkę mającą 3 kolumny i 6 wierszy. Jeśli pokombinujesz z jednostkami fr + ustawieniem na sztywno szerokości pierwszej kolumny, to powinno się dać ustawić to wszystko tak, żeby zawsze zajmowało 90% ekranu. PoC: https://codepen.io/Comandeer/pen/MWKGbRa

Answer 2

Oczywiście, że możesz, włóż tylko wszystkie te boxy do jednego, fragmenty kodu:

Linie 99-100

    <div class="box0">
<div class="box0"> </div>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
<div class="box9">9</div>
    </div>

Oraz linie od 94 do </style>

.box0{
width:90vw
}

Masz coś takiego na myśli?

?vw = ?% szerokości okna przeglądarki

Więcej o jednostkach względnych (vw, vh td.)

Comments

https://codepen.io/diana-larussa/pen/rNxJvPN możesz mi sprawdzić czy jest dobrze? bo jednak nie wyglada mi to na 90% szerokości ;/ 

---

I nie jest, z tego względu, że każesz każdemu boxowi mieć np 150px szerokości i to właśnie jest brane priorytetowo, te boxy mają taką wartość, jaką ustalisz każdemu z osobna, wielkość na podstawie .box0 biorą tylko, kiedy nie mają zdefiniowanej własnej szerokości, a takową mają wszystkie...

Jaki konkretnie efekt chcesz uzyskać? Niestety trzeba będzie wprowadzić kilka poprawek...

---

Własnie sie obawiałam tego, ze nie bedzie tak łatwo. Chciałabym aby to co na zdjeciu bylo traktowane jako jeden 'box' i żeby w zależnosci od rozdzielczosci ekranu, zajmowal 90% jego szerokosci.

---

Musisz wszystkim boxom dać szerokość i wysokość względną.

Szerokość w jednym rzędzie powinna mieć sumę 90vw...

Inaczej tego nie widzę

---

A po co wysokosc wzgledna?

---

Dlatego, że przy odpowiednim kształcie okna przeglądarki, pomijając względną wysokość, proporcje mogą być bardzo zaburzone (z poziomu, można przejść w kwadrat, a nawet pionowy prostokąt).

Oczywiście, nie jest to wymagane, ale jeśli chcesz zachować proporcje takie jak na załączonym przez Ciebie zdjęciu, nie widzę innego rozwiązania...

Answer 3

Po prostu tworzysz nowy box i do niego wrzucasz pozostałe. Daj nowemu boxowi jakaś klase i ustaw mu atrybut

width: 90vw

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units - tutaj znajdziesz wiecej o vw.

https://codepen.io/pawelnackiewicz/pen/vYLjKQw

Answer 4

Możesz dać:

body {
    width: 90vw;
    margin: 5vh auto;
}

wtedy zawartość ci się dodatkowo wyśrodkuje (5vh jako margin przykładowo). Lub też utworzyć div z takimi samymi własnościami i do niego włożyć całą zawartość. Reszta to siatka grid.

Answer 5

już mi udzielono pomocy:) efekt koncowy: https://codepen.io/diana-larussa/pen/rNxJvPN

Answer 6

<div class="grid-container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box3">box3</div>
  <div class="box4">box4</div>
  <div class="box5">box5</div>
  <div class="box6">box6</div>
  <div class="box7">box7</div>
  <div class="box8">box8</div>
  <div class="box9">box9</div>
</div>

html, body {
  height: 100%; 
  margin: 0;
  padding: 0;
}
.grid-container {
  border: 2px solid red; /* do testów */
  display: grid;
  width: 90vw;
  grid-template-columns: 30% 55% 15%;
  grid-template-rows: 100px 60px 70px 60px 140px 70px;
  gap: 0px 0px;
  grid-template-areas: "box1 box2 box2" "box3 box8 box9"
                       "box4 box8 box9" "box5 box8 box9" 
                       "box6 box8 box9" "box7 box8 box9";
  margin-left: auto;
  margin-right: auto;
}
.box1 { 
  grid-area: box1;
    text-align: center;
    line-height: 100px;
	background-color: #F5DADF; 
}
.box2 { 
  grid-area: box2;
	line-height: 100px;
	text-align:center;
	background-color: #F2ECE8;  
}
.box3 { 
  grid-area: box3;
	line-height: 60px;
	text-align:center;
	background-color: #F2ECE8; 
}
.box4 { 
  grid-area: box4;
	line-height: 70px;
	text-align:center;
	background-color: #E2E0E3; 
}
.box5 { 
  grid-area: box5;
    line-height: 60px;
	text-align:center; 
	background-color: #F9DBC6;
}
.box6 { 
  grid-area: box6;
	line-height: 140px;
	text-align:center;
	background-color: #C0D5CF;   
}
.box7 { 
  grid-area: box7;
	line-height: 70px;
	text-align:center;
	background-color: #99C4C8;  
}
.box8 { 
  grid-area: box8;
	line-height: 400px;
	text-align:center;
	background-color: #C3E5E9;  
}
.box9 { 
  grid-area: box9;
	line-height: 400px;
	text-align:center;
	background-color: #F5DADF;  
}

https://codepen.io/vbservice/pen/Bajxpxa