Problém
Tento základní layout, je klasický, ale v tomto uspořádání má automatické velikosti (šířky sloupců), takže pokud je nutné, tak se sloupce levý a pravý chovají nevypočitatelně, tedy spíš vypočitatelně.
je nutné hlídat délku textu a krotit případné tabulky a obrázky
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dignissimos modi laboriosam iusto soluta molestiae, voluptate maxime dolores aliquid eaque. Dolore, sequi. Ea necessitatibus ipsum quam odit debitis quidem maiores!
body {
display: grid;
height: 100vh; /* plná výška obrazovky */
grid-template: auto 1fr auto / auto 1fr auto;
/* první sloupec - auto, druhý sloupec- zbytek, třetí sloupec - auto
/ první řádek - auto, druhý řádek-zbytek, třetí řádek-auto */
}
Délka textu v main
Abych dodržel délku textu v main na doporučených hodnotách, vytvořil jsem v article s předepsanou délkou
Aticle jsem v main vycentroval pomocí grid v nadřazeném rodiči
main {
background: rgba(216, 249, 144, 0.76);
grid-column: 2 / 3; /*druhý řádek - od dvojky do trojky */
padding: 0.25em 0.5em 0.25em 2.5em;
display: grid;
place-items: center;
}
article{ max-width: 68vw;}
Při nedostatku místa se tag pre chová jak se sluší a patří a překrývá případný obrázek s pevnou šířkou
v tom případě je možné barevně odlišit a určit z-index
Myšlenka dobrá, ale bacground u pre podlézá obrázku i přes určení z-indexu
navíc na úzké obrazovce může pre přetékat do pravého sloupce
U pravého sloupce je tak nutné zvednout z-index a nepoužívat průhledné bacground
Řešení PRE
Výpis pre podmínit vlastností max-width a případně jej na malém monitoru schovat visibility: hidden;