Αριθμός και πλάτος στηλών σε CSS Grid

Η γνωριμία με την εργασία στο grid θα ξεκινήσει ορίζοντας τον αριθμό και το πλάτος των στηλών, στις οποίες θα τοποθετούνται τα θυγατρικά στοιχεία. Για αυτόν τον σκοπό θα χρησιμοποιήσουμε την ιδιότητα grid-template-columns, η οποία ορίζεται στο γονικό στοιχείο και καθορίζει τον αριθμό και το πλάτος των στηλών, που θα καταλαμβάνουν τα θυγατρικά στοιχεία στο grid. Στην τιμή της ιδιότητας ορίζουμε το πλάτος των στηλών σε pixels.

Παράδειγμα

Αρχικά, ας δημιουργήσουμε το γονικό στοιχείο και το κάνουμε grid container. Ας υποθέσουμε ότι έχουμε ένα div, στο οποίο βρίσκονται τέσσερα θυγατρικά στοιχεία. Ας ορίσουμε για αυτό στην ιδιότητα display την τιμή grid, και στην ιδιότητα grid-template-columns να γράψουμε το πλάτος για δύο στήλες:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 200px 400px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Τώρα ας δημιουργήσουμε έναν πίνακα με τέσσερις στήλες διαφορετικού μεγέθους:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 100px 200px 250px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Πρακτικές Ασκήσεις

Ας υποθέσουμε ότι έχετε ένα div με εννέα θυγατρικά στοιχεία. Κάντε το γονικό στοιχείο grid container.

Τοποθετήστε τα θυγατρικά στοιχεία σε δύο στήλες πλάτους 200px.

Τοποθετήστε τα θυγατρικά στοιχεία σε τρεις στήλες πλάτους 150px.

Τοποθετήστε τα θυγατρικά στοιχεία σε τρεις στήλες: η πρώτη πλάτους 100px, η δεύτερη 150px, και η τρίτη 200px.