Diskuze: CSS grid šablóna - Vycentrovanie a minimálna šírka stĺpcov

Diana

Člen

Diana:18.1.2023 16:58

Dobrý deň. mám spravenú šablónu stránky ako CSS grid, pričom sa mi nedarí správne nastaviť vycentrovanie hlavného css grid kontajnera na stred stránky a nastaviť minimálnu šírku kontajnera.

Zkusil jsem:

.kontajner {
        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: 390px 820px 390px;*/
        grid-template-rows: 900px auto auto 400px;
        gap: 0;
        justify-content: center;
}

.hlavicka {
        grid-area: hlavicka;
        background-color: green;
}

.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;
}

.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: fuchsia;
        min-width: 90px;
        min-height: 190px;
}

.pravy-dolny-box {
        grid-area: pravy-dolny-box;
        background-color: fuchsia;
        min-width: 90px;
        min-height: 190px;
}

.pata {
        grid-area: pata;
        background-color: aqua;
}

<div class="kontajner">
        <div class="hlavicka">Hlavička</div>
        <div class="lavy-horny-box">Ľavý horný box</div>
        <div class="stredny-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>

Pri vycentrovaní kontajnera na stránke sa síce vycentruje na stred, ale pri zmenšení okna prehliadača na minimum je vidieť, že ľavá časť kontajnera je urezaná a skrytá za ľavým okrajom prehliadača, teda ľavý horný a dolný box vôbec nie je vidieť. Ja som to zatiaľ riešila tak, že som kontajner obalila do obalu:

.kontajner-obal {
        width: 1600px;
        margin: 0 auto;
}

Chci docílit: 1. Potrebujem správne nastaviť hlavný kontajner tak, aby bol vycentrovaný v strede stránky a nedochádzalo k jeho skrývaniu sa za okraj prehliadača vľavo.

2. Zároveň potrebujem poradiť, ako správne nastaviť kontajner a jeho stĺpce, aby užívateľ, ktorý používa monitor s vyšším rozlíšením, videl stránku so šírkou 1600px a na monitoroch s nižším rozlíšením bola šírka minimálne 1000px.

chcem teda zachovať stredný box, ktorý má nastavenú šírku 820px a slúži pre vloženie obsahu + 90px v každom bočnom boxe z ľava a z prava (t.j spolu 180px) a to dáva po zrátaní výsledných 1000px minimálnej šírky celého kontajnera.

Ďakujem vopred za pomoc.

Odpovědět

18.1.2023 16:58

Peter Mlich

Člen

Peter Mlich:19.1.2023 8:05

A co pouzit bootstrap css?
https://getbootstrap.com/

Na teto strance pouzivam starsi verzi https://www.rar.cz/ a sirky sloupcu nastavuji pak v html jako

sloupec1: col-12 col-sm-12 col-md-4 col-lg-3 /*12 sloupcu je normal sirka, 12 pri sirce obrazovky sm, 4 pri md a 3 pri sirce lg sloupec2: (large)  */
col-12 col-sm-12 col-md-8 col-lg-9

Cili, layout se pri mensi sirce zalamuje. Sm a mensi jsou sloupce pres celou sirku obrazovky, cili, pod sebou. Pro md je to 4:8 (col-md-4 col-md-8), pro lg a vice je to 3:9 (col-lg-3, col-lg-9)

V nove verzi nevim, jak se to presne zapisuje, ale najdes si to v dokumentaci.
https://getbootstrap.com/…/containers/
https://getbootstrap.com/…layout/grid/#…

Vsechny ty ostatni veci uz ma prave bootstrap css v sobe napsane a nemusis je vymyslet od zacatku. Teda, pokud to nemas za ukol do skoly nebo tak neco. Ja to pak dal resim tak, ze mam original BT soubor a pod nim prepisuji nektere vlastnosti, idealne vlastnimi tridami, jako rar_layout rar_header, abych nemusel slozite prepisovat cele struktury jejich css souboru.

<link rel="stylesheet" href="./css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="./css/style.css" type="text/css" media="screen">

Nahoru Odpovědět

19.1.2023 8:05

Peter Mlich

Člen

Peter Mlich:19.1.2023 8:14

A, jinak, na co se ptas, mozna je odpovedi

grid-template-columns: minmax(100px, 1fr);

https://developer.mozilla.org/…late-columns
Ty mas nahore definovane, ze stred ma byt pevne 820px. Takze, pri zmenseni sirky okna zustane 820px a levy a pravy box mizi. Takze by bylo lepsi definovat nejake min-max nebo % sirky okna. A nebo definovat sirku bocnich panelu, treba 200px a stred na auto.

grid-template-columns: auto 820px auto; /*to tam mas*/
grid-template-columns: 200px auto 200px; /*zmeneno*/

Nahoru Odpovědět

19.1.2023 8:14

Diana

Člen

Diana:19.1.2023 10:50

Bootstrap nechcem vyuzit vobec, citala som dost o Grid css, ktore ma niekedy viac vyhod nez Flex, samozrejme, ze netvrdim, ze sa tomu rozumiem. Na strankach by som chcela vyuzit vlastnosti Grid css a v urcitych pripadoch Flex, k tomu sa ale dostanem este neskor, pretoze by som sa v inom vlakne chcela opytat na nieco ine.

Momentalne pracujem na webe: Web

Grafika stranky je dost prepracovana, takze nechcem strihat viac, nez musim. Preto chcem mat jednotlive graficke bloky v boxoch a mozem ich nadefinovat uz priamo do grid css, co mi umozni zbytocne nevytvarat dalsie div pre grafiku viac, nez je nutne a nemusim tu zbytocne riesit v sablone stranky obtekanie div atd.

Test 01: - ked nastavim hodnoty

grid-template-columns: auto 820px auto; /*to tam mas*/
grid-template-columns: 200px auto 200px; /*zmeneno*/

tak vyjde tento vysledok: Test01

Ak by som napr. chcela dat strednemu boxu minimalnu sirku 820px:

.stredny-box {
        grid-area: stredny-box;
        background-color: yellow;
        min-width: 820px;
}

tak je vysledok tento: Test02

Najlepsie bude, ak spravim ukazku s natiahnutim grafiky a jednotlive boxy ohranicim okrajmi a vlozim tam popisy boxov, aby vznikla presna predstava, aka cast grafiky musi byt vlozena do jednotlivych boxov a musi byt viditelna.

Samozrejme sa vratim este k tvojej casti kodu:

grid-template-columns: minmax(100px, 1fr);

pretoze je urcite velmi podstatne, ako sa stlpce nadefinuju, aby splnali to, co chcem dosiahnut.

Nahoru Odpovědět

19.1.2023 10:50

Peter Mlich

Člen

Peter Mlich:19.1.2023 12:10

Kdyz jsem tam zrusil justify-content: center;, tak se to pri zmenseni zacalo zobrazovat dobre, ve Firefoxu. A mozna bych tam
pridal min-width:1000px;, kdyz tam mas pozadavek na min-width.
Ale, ja osobne bych sel do bootstrapu a nechal to zalamovat. Tam mas vicemene jistotu, ze i za 10 let se to zobrazi ok. a kdyz ne, staci to prepsat podle noveho BT. Nekdo jiny uz podobne problemy vyresil za tebe.

Nahoru Odpovědět

19.1.2023 12:10

Diana

Člen

Diana:19.1.2023 13:08

myslis na mojom povodnom kode ?:

.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: 390px 820px 390px;*/
        grid-template-rows: 900px auto auto 400px;
        gap: 0;
        /*justify-content: center;*/
}

skusila som to teraz a kontajner nezachadza za lavy okraj prehliadaca, teda lave boxy su vidiet, ale stranka je roztiahnuta na cely obsah okna prehliadaca, teda sa zrusila tym padom vlastnost vycentrovania kontajnera na stred stranky
ak by som grid kontajner dala do dalsieho div obalu a ten vystredila pomocou css margin: 0 auto;, tak sa sice vystredi, ale len pri stanoveni pevnej sirky - ak sa nemylim, tu nie je mozne nastavit min-width, lebo sa zrusi vlastnost vycentrovania

.kontajner-obal {
        width: 1600px; /* min-width: 1000px; */
        margin: 0 auto;
}

Nahoru Odpovědět

19.1.2023 13:08

Diana

Člen

Diana:19.1.2023 13:46

teraz som skusila spravit to, co mi absolutne nenapadlo a to je asi ta velka chyba, ktorej som sa dopustila, ak grid kontajner obalim dalsim div obalom, ktorym budem chciet vycentrovat grid kontajner na stred obrazovky, tak mu mozem priradit dva css prikazy a to max-width aj min-width a tym padom sa nerusi vlastnost vycentrovania div obalu a oba kontajnery chovaju tak, ako si to predstavujem

 .kontajner-obal {
        max-width: 1600px;
        min-width: 1000px;
        margin: 0 auto;
        background-color: red;
}

Test03

ale i napriek tomu si myslim, ze toto je len take zmiesane riesenie technik grid a css a ze existuje riesenie ciste pomocou prikazov pre grid

napr. az teraz som sa stretla s takymto prikladom Príklad kde sa prikaz min-max da vlozit priamo do grid-template-columns:

grid-template-columns: 1fr minmax(auto, 20%);

tak premyslam, ci toto nie je cesta cisteho grid kodu pre moju sablonu s tym, ze namiesto percent by som vyuzila pevnu sirku v pixeloch, nieco take ako:

.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: minmax(90px, auto) 820px minmax(90px, auto);
        grid-template-rows: minmax(900px, auto) auto auto minmax(400px, auto);
        gap: 0;
        /*justify-content: center;*/
}

cim by som nemusela zapisovat prikazy min-width a min-height do ziadneho dalsieho kontajnera

Nahoru Odpovědět

19.1.2023 13:46

Diana

Člen

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>

Spravny vysledok

Akceptované řešení
+5 Zkušeností

Nahoru Odpovědět

19.1.2023 17:22

Diana

Člen

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. :-)

Nahoru Odpovědět

19.1.2023 17:33

Peter Mlich

Člen

Peter Mlich:20.1.2023 7:56

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

Nahoru Odpovědět

20.1.2023 7:56

Diana

Člen

Diana:20.1.2023 8:34

ja este len vytvorim nove vlakno, toto bolo prve, takze ho uvidis v najnovsich vlaknach

Nahoru Odpovědět

20.1.2023 8:34

Nejčastěji vyhledáváné

Diskuze: CSS grid šablóna - Vycentrovanie a minimálna šírka stĺpcov