Diskuze: CSS grid šablóna - Vycentrovanie a minimálna šírka stĺpcov
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Diana:19.1.2023 17:22
Takze som prisla na spravne riesenia:
Ako som uz pisala, chcela som dosiahnut to, aby kontajner stranky mal pohyblivu sirku za tychto podmienok:
- Stranka ma mat v originalnej plnej grafickej uprave sirku 1600px, pri zmenseni okna prehliadaca minimalne 1000px.
- Stred stranky s obsahom musi mat pevnu sirku 820px (dovod je vkladany obsah s obrazkami, ktore si tu sirku vyzaduju).
- Hlavny kontajner musi byt vycentrovany na stred obrazovky a pri zmenseni okna prehliadaca nic nesmie zachadzat za lavy okraj.
1.) V tomto pripade som pouzila zmiesane nastavenia a zistila som, ze ak osetrim CSS kodom jednotlive boxy, tak to bude vsetko fungovat, ale mnozstvo kodu je zbytocneho, pricom je potrebne davat si pozor na zapis "auto" a "1r", co je uvedene v komentari kodu.
CSS:
.kontajner-obal {
max-width: 1600px;
min-width: 1000px;
margin: 0 auto;
background-color: red;
}
.kontajner-grid {
display: grid;
grid-template-areas: "hlavicka hlavicka hlavicka"
"lavy-horny-box stredny-box pravy-horny-box"
"lavy-dolny-box stredny-box pravy-dolny-box"
"pata pata pata";
/* grid-template-columns: auto 820px auto; - hodnoty "auto" uberu lavym boxom zo sirky 5px a pravym boxom pridaju na sirke 5px */
grid-template-columns: 1fr 820px 1fr; /* spravne riesenie */
/* grid-template-rows: 900px 1fr 1fr 400px; - hodnoty "1fr" rozdelia obsah lavych a pravych boxov na rovnaku vysku 305px, cim rusia nastavenia min-height v boxoch */
grid-template-rows: 900px auto auto 400px; /* spravne riesenie */
gap: 0;
/*justify-content: center;*/
}
.hlavicka {
grid-area: hlavicka;
background-color: teal;
height: 900px;
}
.lavy-horny-box {
grid-area: lavy-horny-box;
background-color: fuchsia;
min-width: 90px;
min-height: 305px;
}
.stredny-box {
grid-area: stredny-box;
background-color: yellow;
width: 820px;
}
.pravy-horny-box {
grid-area: pravy-horny-box;
background-color: fuchsia;
min-width: 90px;
min-height: 305px;
}
.lavy-dolny-box {
grid-area: lavy-dolny-box;
background-color: orange;
min-width: 90px;
min-height: 190px;
}
.pravy-dolny-box {
grid-area: pravy-dolny-box;
background-color: orange;
min-width: 90px;
min-height: 190px;
}
.pata {
grid-area: pata;
background-color: aqua;
height: 400px;
}HTML:
<div class="kontajner-obal">
<div class="kontajner-grid">
<div class="hlavicka">Hlavička</div>
<div class="lavy-horny-box">Ľavý horný box</div>
<div class="stredny-box">Stredný box</div>
<div class="pravy-horny-box">Pravý horný box</div>
<div class="lavy-dolny-box">Ľavý dolný box</div>
<div class="pravy-dolny-box">Pravý dolný box</div>
<div class="pata">Päta</div>
</div>
</div>2.) V tomto pripade som vynechala vsetky CSS kody pre vsetky boxy a pouzila riesenie s cistym grid kodom v kontajner-grid, cim odpadlo mnozstvo zbytocnosti a to povazujem za cistejsie riesenie (v kode som zakomentovala vsetky zbytocnosti), ktore boli opravene alebo vynechane.
CSS:
.kontajner-obal {
max-width: 1600px;
min-width: 1000px;
margin: 0 auto;
background-color: red;
}
.kontajner-grid {
display: grid;
grid-template-areas: "hlavicka hlavicka hlavicka"
"lavy-horny-box stredny-box pravy-horny-box"
"lavy-dolny-box stredny-box pravy-dolny-box"
"pata pata pata";
/* grid-template-columns: auto 820px auto; */
grid-template-columns: minmax(90px, 1fr) 820px minmax(90px, 1fr); /* spravne riesenie */
/* grid-template-rows: 900px auto auto 400px; */
grid-template-rows: minmax(900px, auto) minmax(305px, auto) minmax(190px, auto) minmax(400px, auto);
gap: 0;
}
.hlavicka {
grid-area: hlavicka;
background-color: teal;
/* height: 900px; */
}
.lavy-horny-box {
grid-area: lavy-horny-box;
background-color: fuchsia;
/* min-width: 90px; */
/* min-height: 305px; */
}
.stredny-box {
grid-area: stredny-box;
background-color: yellow;
/* width: 820px; */
}
.pravy-horny-box {
grid-area: pravy-horny-box;
background-color: fuchsia;
/* min-width: 90px; */
/* min-height: 305px; */
}
.lavy-dolny-box {
grid-area: lavy-dolny-box;
background-color: orange;
/* min-width: 90px; */
/* min-height: 190px; */
}
.pravy-dolny-box {
grid-area: pravy-dolny-box;
background-color: orange;
/* min-width: 90px; */
/* min-height: 190px; */
}
.pata {
grid-area: pata;
background-color: aqua;
/* height: 400px; */
}HTML:
<div class="kontajner-obal">
<div class="kontajner-grid">
<div class="hlavicka">Hlavička</div>
<div class="lavy-horny-box">Ľavý horný box</div>
<div class="stredny-box">Stredný box</div>
<div class="pravy-horny-box">Pravý horný box</div>
<div class="lavy-dolny-box">Ľavý dolný box</div>
<div class="pravy-dolny-box">Pravý dolný box</div>
<div class="pata">Päta</div>
</div>
</div>+5 Zkušeností
Diana:19.1.2023 17:33
Peter Mlich: Velmi pekne dakujem za pomoc pri rieseni a co
sa tyka bootstrap, tak zatial som ho nikdy nevyuzila, co
zaroven neznamena, ze sa mi niekde nezide, ale musim si to nastudovat, aby som
mala aky taky prehlad, ako to funguje. Budem rada, ked sa ozves k mojim dalsim
vlaknam, lebo musim doriesit minimalne este jednu zalezitost s vrstvenim div-ov
nad sebou. 
Asi se tu neda nikde kliknout na seznam vlaken, v profilu osoby. Takze, tezko
rici, kde je neco od tebe dalsiho Jinak, dobra diskuze na html css je tez na jakpsatweb.cz
Zobrazeno 11 zpráv z 11.