Ιδιότητα grid

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

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

Σύνταξη

στοιχείο {
	grid: ιδιότητες πλέγματος;
}

Παράδειγμα

Ας φτιάξουμε έναν πίνακα χρησιμοποιώντας την ιδιότητα 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: 400px;
	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: 400px;
	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: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Δείτε επίσης

η ιδιότητα grid-template,
που ορίζει τον αριθμό και το πλάτος των στηλών και των σειρών για ένα στοιχείο
η ιδιότητα grid-template-rows,
που ορίζει τον αριθμό και το πλάτος των σειρών στο πλέγμα
η ιδιότητα grid-template-columns,
που ορίζει τον αριθμό και το πλάτος των στηλών στο πλέγμα
η ιδιότητα grid-template-areas,
που ορίζει την τοποθέτηση των στοιχείων στο πλέγμα
η ιδιότητα grid-auto-flow,
που ορίζει την αυτόματη τοποθέτηση των στοιχείων στο πλέγμα