Návod: Super jednoduchý layout pro blog s využitím CSS gridu

Kódování webu

Krásná ukázka toho, jak lze na pár řádků s využitím moderních postupů v CSS vytvořit jednoduchý layout…

article {
	display: grid;
	grid-template-columns: minmax(30px, 1fr) minmax(auto, 70ch) minmax(30px, 1fr);	
	> * {
		grid-column: 2;
	}	
	img {
		grid-column: 1 / 4;
		width: 100%;
		max-width: 1200px;
		justify-self: center;
		object-fit: cover;
	}
}

V principu si nastavím grid a funkcí minmax() nastavím minimální okraje po stranách (z pohledu hlavního obsahu de facto „padding“), obsah tak bude odsazen od kraje okna minimálně 30px, ale maximálně 1fr (fraction unit), ta reprezentuje podíl na volném prostoru v gridu. Pro obsah pak definuji automatickou šířku respektive maximálně 70 znaků (minmax(auto, 70ch)).

Veškerý obsah přes > * umístím do stejného bloku, se stejnou šířkou. Ilustrační obrázek nakonec roztáhnu do stran tak, aby přesahoval celý layout (grid-column: 1 / 4;). Přičemž mu nastavuji nějakou maximální šířku 1200px a centruji ho přes justify-self: center. Základ pro blog na pár řádků. 🙂

Krátce ke grid-column

btw: Proč grid-column: 1 / 4; když máme pouze tři sloupce? Je třeba nad tím přemýšlet jako nad postranními liniemi řádků/sloupců (viz obrázek níže). Zajímavé je, že můžeme případně použít i záporná čísla, ty se počítají od konce. Pokud tedy předem neznáme počet řádků/sloupců, můžeme napsat např. grid-column: 1 / -1; / grid-rows: 1 / -1; a mít grid vždy přes všechny sloupce nebo řádky.

CSS Grid Column, image by Andrew Small

Velice jednoduché řešení, které dobře funguje na desktopu i mobilu bez dalších definic pro responzivitu.

See the Pen
Super simple blog layout
by Víťa Dlouhý (@v-a-dlouh)
on CodePen.

Další zdroje: