Rácsos elrendezés létrehozása

A display: grid; vagy a display: inline-grid; beállítással létrehozhatunk egy Grid konténert, amelynek elemeit sorokba és oszlopokba rendezhetjük.

A rácsos elrendezés megjelenítésének logikája nagyban hasonlít a táblázatos elrendezésre. A megvalósítás azonban teljesen másként működik.

összetett responsive oldalszerkezet alakítható ki egyszerű és áttekinthető HTML és CSS kód írásával,
a gyermekelemek pozíciói a HTML kód módosítása nélkül csupán CSS jellemzők változtatásával módosíthatók.

1. Példa:

Forráskód


 

<head> 
...	
<style>
...
			.divBlock {
				display: block;
			}		
			.divGrid {
				display: grid;		
			}				
			.divInlineGrid {
				display: inline-grid;
			}
			.grid-template-columns3 {
				grid-template-columns: auto auto auto;
			}									
		</style>
	</head>
	<body> 
		<h2>display: block;</h2>	
		<div class="divBlock">
		  <div class="Elem">1</div>
		  <div class="Elem">2</div>
		  <div class="Elem">3</div>
		  <div class="Elem">4</div>
		  <div class="Elem">5</div>
		  <div class="Elem">6</div>
		</div>		
		<h2>display: grid;</h2>	
		<div class="divGrid">
		  <div class="Elem">1</div>
		  <div class="Elem">2</div>
		  ...
		  <div class="Elem">6</div>
		</div>
		<h2>display: grid;</h2>	
		<b>grid-template-columns: auto auto auto;</b>
		<div class="divGrid grid-template-columns3">
		  <div class="Elem">1</div>
		  <div class="Elem">2</div>
		  ...
		  <div class="Elem">6</div>
		</div>		
		<h2>display: inline-grid;</h2>	
		<b>grid-template-columns: auto auto auto;</b>
		<div class="divInlineGrid grid-template-columns3">
		  <div class="Elem">1</div>
		  <div class="Elem">2</div>
		  ...
		  <div class="Elem">6</div>
		</div>			
	</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: grid1.html