VISSZA
MENÜ
TOVÁBBA grid-column összevont tulajdonság segítségével egy lépésben állíthatjuk be a grid-column-start és a grid-column-end tulajdonságokat.
Gyermekelem vízszintes pozíciója:
kijelölő
{
grid-column
:
grid-column-start
/
grid-column-end;
}
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-areas1 .a1 {
grid-column: 1 / 3;}
.template-areas1 .a5 {
grid-column: 2 / 5;}
.template-areas2 .a1 {
grid-column: 2 / 4;}
.template-areas2 .a2 {
grid-column: 2 / 5;}
.template-areas3 .a1 {
grid-column: 1 / span 2;}
.template-areas3 .a5 {
grid-column: 2 / span 3;}
.template-areas4 .a1 {
grid-column: 2 / span 2;}
.template-areas4 .a2 {
grid-column: 2 / span 3;}
</style>
</head>
<body>
<p>.a1 {grid-column: 1 / 3;}<br>
.a5 {grid-column: 2 / 5;}</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: 2 / 4;}<br>
.a2 {grid-column: 2 / 5;}</p>
<div class="divGrid template-areas2">
<div class="Elem a1">a1</div>
<div class="Elem a2">a2</div>
...
<div class="Elem a6">a6</div>
</div>
<p>.a1 {grid-column: 1 / span 2;}<br>
.a5 {grid-column: 2 / span 3;} </p>
<div class="divGrid template-areas3">
<div class="Elem a1">a1</div>
<div class="Elem a2">a2</div>
...
<div class="Elem a6">a6</div>
</div>
<p>.a1 {grid-column: 2 / span 2;} <br>
.a2 {grid-column: 2 / span 3;}</p>
<div class="divGrid template-areas4">
<div class="Elem a1">a1</div>
<div class="Elem a2">a2</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">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ő: grid14.html