Συντομογραφία Ιδιοτήτων CSS Grid

Η ιδιότητα grid αντιπροσωπεύει μια συντομογραφία όλων των ιδιοτήτων των στηλών και των σειρών του grid container. Όλες οι τιμές καταγράφονται σε μία γραμμή διαχωρισμένες με κάθετο.

Μέσω της grid σε μία γραμμή μπορούν να περιγραφούν μόνο ένας τύπος ιδιοτήτων - οι ρητές (grid-template-rows, grid-template-columns, grid-template-areas) ή οι άρρητες (grid-auto-rows, grid-auto-columns, grid-auto-flow). Οι ιδιότητες που δεν ορίστηκαν, λαμβάνουν τις προεπιλεγμένες τιμές τους.

Παράδειγμα

Ας φτιάξουμε έναν πίνακα χρησιμοποιώντας την ιδιότητα grid:

<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>9</div>
</div>

#parent {
	display: grid;
	grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 200px;
}
#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>9</div>
</div>

#parent {
	display: grid;
	grid: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 300px;
}
#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>9</div>
</div>

#parent {
	display: grid;
	grid: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

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

Υλοποιήστε το ακόλουθο παράδειγμα: