CSS Grid Layout

05 február 2018 / By Mavrák Richárd

Tudjuk nagyon jól, hogy a design és a weboldal készítés elemei folyamatosan, rohamosan változnak évről évre. Mindig van valami új ötlet, megoldás amivel még jobbá és könnyebbé tehetjük a weboldal készítését.

Minden webdesigner ismeri a HTML és a CSS nyelvet, mert ezek tökéletes ismerete nélkül, nem igazén tud senki sem egy igényes és modern weboldalt összeállítani.

Több kezdő webdesigner kérdezte tőlem, hogy milyen proggramokkal dolgozom, mivel szerkesztek és írok kódokat. Nos tisztában vagyok vele, hogy sokan, főleg a kezdő webdesignerek Bootpsrap-et használnak, ami valóban egy jó és profi alkalmazás, sajnos a szakszerűtlen használatnak lett egy olyan hátrányai, hogy a Bootstrap-os oldalakat elkezdték egy kalap alatt kezelni, mivel sokan nem nyúltak az alap témához, így rengeteg oldal akad, amiről első ránézésre megmondhatjuk, hogy Bootstrap-ot használ.

Természetesen én is szoktam használni, de pl. egy alap rácsszerkezetet magam szoktam létrehozni CSS Grid elemekkel:

Minden weboldal „rácsnézeten” alapul, ami azt jelenti, hogy az oldal több oszlopra oszlik. Ez az oszlopszám 12.  A 12 oszlopokat osztjuk és helyezzük el az oldalakon úgy, hogy a vizuális szabályokat figyelemben tartjuk.

Egy rácsnézet létrehozása – CSS Grid megírása igen csak egyszerűbbé teheti az alapvázunk elkészítését, illetve gyors prezentációnk megvalósítását is nagyban segíti.

 

De mi is az a CSS grid layout?

A CSS-rács elrendezés egy olyan megoldás a CSS kódolásban, ami lehetővé teszi a web fejlesztők, webdesignerek számára, hogy könnyebben és gyorsabban hozzák létre a responsive webes megjelenést a böngészőkre optimalizálva.

A CSS Grid alapok:

A HTML elemeink rácsos konténerré alakításához, adjuk hozzá a grid vagy inline-grid tulajdonságot.

.grid-container {
display: grid;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Grid Layout</h1>

<p>This grid layout contains six columns and three rows:</p>
<div class=”grid-container”>
<div class=”item1″>Header</div>
<div class=”item2″>Menu</div>
<div class=”item3″>Main</div>
<div class=”item4″>Right</div>
<div class=”item5″>Footer</div>
</div>
</body>
</html>

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
display: grid;
grid-template-areas:
‘header header header header header header’
‘menu main main main right right’
‘menu footer footer footer footer footer’;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}

Nézzünk meg egy példát, hogy miként tudjuk a képen lévő egyszerű elrendezést, a legegyszerűbben lértehozni CSS Grid segítségével?

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
<body>
<div class=”header”>
<h1>Chania</h1>
</div>
<div class=”row”>
<div class=”col-3 menu”>
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class=”col-9″>
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
</html>

* {
box-sizing: border-box;
}
.row::after {
content: “”;
clear: both;
display: table;
}
[class*=”col-“] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
font-family: “Lucida Sans”, sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}

Az oszlopok és sorok beállításai:

grid-column-gap
grid-row-gap
grid-gap

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The grid-column-gap Property:</h1>

<div class=”grid-container”>
<div class=”grid-item”>1</div>
<div class=”grid-item”>2</div>
<div class=”grid-item”>3</div>
<div class=”grid-item”>4</div>
<div class=”grid-item”>5</div>
<div class=”grid-item”>6</div>
<div class=”grid-item”>7</div>
<div class=”grid-item”>8</div>
<div class=”grid-item”>9</div>
</div>

<p>Use the <em>grid-column-gap</em> property to adjust the space between the columns.</p>
</body>
</html>

.grid-container {
display: grid;
grid-column-gap: 50px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}

Sokkal több megoldás és lehetőséget biztosít ez a megoldás, mint amit egy blogbejegyzésben betudnék mutatni, ezért célszerű mindenkinek utána néznie önszorgalomból a témában. Volt olyan webdesigner, aki szerint a Bootstrap “lassú halálát okozza”, de nem is tudom…
Majd meglátjuk 🙂

Források: 

w3schools.com

css-tricks.com

About The Author

Mavrák Richárd