Gyermekelem záróoszlopa - WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS

A grid-column-end tulajdonság segítségével állíthatjuk be, hogy az adott gyermekelem hányadik oszlopig tartson.

Gyermekelem záróoszlopának beállítása:

kijelölő

{

grid-column-end

szám/kulcsszó;

}

Értéke lehet

auto automatikus.
szám az adott számú oszlop elé kerül. (Az elem után következő oszlop száma.)
span szám azoknak a oszlopoknak darabszáma, amelyekben az elem elhelyezkedik. ("összevont" oszlopoknak száma)

1. Példa:

Forráskód


 

<head> 
...	
<style>
...
	.divGrid {
				padding: 0px 0px;
				height: 200px;
				display: grid;	
				grid-template-columns: 1fr 1fr 1fr 1fr;
				grid-template-rows: 1fr 1fr 1fr 1fr;
				grid-gap: 2px;	
			}			
			.template-areas0 .a1 {grid-column-end: 3;}
			.template-areas0 .a3 {grid-column-end: 4;}			
			.template-areas1 .a1 {grid-column-end: span 2;}
			.template-areas1 .a4 {grid-column-end: span 3;}			
			.template-areas2 .a1 {grid-column-end: span 2;}
			.template-areas2 .a3 {grid-column-end: span 3;}			
			.template-areas3 .a1 {grid-column-start: 2;
				grid-column-end: span 2;}
			.template-areas3 .a2 {grid-column-start: 3;
				grid-column-end: span 2;}		
		    .template-areas4 .a2 {grid-column-start: 2;
				grid-column-end: span 2;}				
			.template-areas4 .a4 {grid-column-start: 2;
				grid-column-end: span 3;}	
			.template-areas4 .a6 {grid-column-start: 2;
				grid-column-end: span 2;}						
		</style>
	</head>
	<body> 	
		<p>.a1 {grid-column-end: 3;}<br>
			.a3 {grid-column-end: 4;}</p>	
		<div class="divGrid template-areas0">
		  <div class="Elem a1">a1</div>
		  <div class="Elem a2">a2</div>
		  <div class="Elem a3">a3</div>
		  <div class="Elem a4">a4</div>
		  <div class="Elem a5">a5</div>
		  <div class="Elem a6">a6</div>
		</div>		
		<p>.a1 {grid-column-end: span 2;}<br>
			.a4 {grid-column-end: span 3;}</p>	
		<div class="divGrid template-areas1">
		  <div class="Elem a1">a1</div>
		  <div class="Elem a2">a2</div>
		  <div class="Elem a3">a3</div>
		  <div class="Elem a4">a4</div>
		  <div class="Elem a5">a5</div>
		  <div class="Elem a6">a6</div>
		</div>	
		<p>.a1 {grid-column-end: span 2;}<br>
			.a3 {grid-column-end: span 3;}</p>	
		<div class="divGrid template-areas2">
		  <div class="Elem a1">a1</div>
		  <div class="Elem a2">a2</div>
		  <div class="Elem a3">a3</div>
		  <div class="Elem a4">a4</div>
		  <div class="Elem a5">a5</div>
		  <div class="Elem a6">a6</div>
		</div>			
		<p>.a1 {grid-column-start: 2;
				grid-column-end: span 2;}<br>
			.a2 {grid-column-start: 3;
				grid-column-end: span 2;}</p>	
		<div class="divGrid template-areas3">
		  <div class="Elem a1">a1</div>
		  <div class="Elem a2">a2</div>
		  <div class="Elem a3">a3</div>
		  <div class="Elem a4">a4</div>
		  <div class="Elem a5">a5</div>
		  <div class="Elem a6">a6</div>
		</div>	
		<p>.a2 {grid-column-start: 2;
				grid-column-end: span 2;}<br>			
			.a4 {grid-column-start: 2;
				grid-column-end: span 3;}<br>	
			.a6 {grid-column-start: 2;
				grid-column-end: span 2;}</p>	
		<div class="divGrid template-areas4">
		  <div class="Elem a1">a1</div>
		  <div class="Elem a2">a2</div>
		  <div class="Elem a3">a3</div>
		  <div class="Elem a4">a4</div>
		  <div class="Elem a5">a5</div>
		  <div class="Elem a6">a6</div>
		</div>	
		<p>4*4-es rácsszerkezet</p>
		<div class="divGrid " >
		  <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 class="Elem">7</div>
		  <div class="Elem">8</div>
		  <div class="Elem">9</div>
		  <div class="Elem">10</div>
		  <div class="Elem">11</div>
		  <div class="Elem">12</div>
		  <div class="Elem">13</div>
		  <div class="Elem">14</div>
		  <div class="Elem">15</div>
		  <div class="Elem">16</div>
		</div>		
	</body>
</html>

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ő: grid12.html