Συνδυασμοί Εύρους Σειρών και Στηλών σε CSS Grids
Ας δούμε τους διαφορετικούς τύπους ενώσεων σειρών και στηλών.
Παράδειγμα
Ας φτιάξουμε έναν πίνακα συνδυάζοντας τις ιδιότητες grid-column και grid-row:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 3;
}
#elem2 {
grid-row: 1 / 2;
}
#elem3 {
grid-row: 1 / 2;
}
#elem4 {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
:
Παράδειγμα
Τώρα ας κάνουμε το πρώτο και το τέταρτο block να καταλαμβάνουν ολόκληρη τη σειρά, το δεύτερο block να καταλαμβάνει δύο σειρές και δύο στήλες, και το τρίτο και τέταρτο block να καταλαμβάνουν μία σειρά και δύο στήλες:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
</div>
#parent {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
#elem2 {
grid-row: 2 / 4;
grid-column: 1 / 2;
}
#elem3 {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
#elem4 {
grid-row: 3 / 3;
grid-column: 2 / 4;
}
#elem5 {
grid-row: 4 / 5;
grid-column: 1 / 4;
}
:
Παράδειγμα
Ας κάνουμε το πρώτο στοιχείο του πίνακα να καταλαμβάνει όλες τις στήλες της πρώτης σειράς, και τα υπόλοιπα στοιχεία να τοποθετηθούν στη δεύτερη σειρά, καταλαμβάνοντας στήλες ίσου πλάτους:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
#elem2 {
grid-row: 2 / 3;
}
#elem3 {
grid-row: 2 / 3;
}
#elem4 {
grid-row: 2 / 3;
}
:
Παράδειγμα
Ας τροποποιήσουμε το προηγούμενο παράδειγμα έτσι ώστε το δεύτερο στοιχείο να καταλαμβάνει μια στήλη που είναι τρεις φορές πιο φαρδιά από τις στήλες του τρίτου και τέταρτου στοιχείου:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
height: 300px;
width: 400px;
display: grid;
grid-template-columns: 3fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
#elem2 {
grid-row: 2 / 3;
}
#elem3 {
grid-row: 2 / 3;
}
#elem4 {
grid-row: 2 / 3;
}
:
Παράδειγμα
Τώρα ας τοποθετήσουμε δύο στοιχεία στην πρώτη σειρά, ορίζοντας διαφορετικά πλάτη στηλών για το καθένα:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
#elem2 {
grid-row: 1 / 2;
grid-column: 4 / 5;
}
#elem3 {
grid-row: 2 / 3;
grid-column: 1 / 3;
}
#elem4 {
grid-row: 2 / 3;
grid-column: 3 / 5;
}
:
Παράδειγμα
Τώρα ας πούμε ότι έχουμε έναν πίνακα που αποτελείται από πέντε στοιχεία. Ας τοποθετήσουμε το πρώτο στοιχείο στην επάνω σειρά, και όλα τα άλλα στη δεύτερη σειρά:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 5;
}
#elem2 {
grid-row: 2 / 3;
grid-column: 1 / 2;
}
#elem3 {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
#elem4 {
grid-row: 2 / 3;
grid-column: 3 / 4;
}
#elem5 {
grid-row: 2 / 3;
grid-column: 4 / 5;
}
:
Πρακτικές ασκήσεις
Τοποθετήστε όλα τα στοιχεία σύμφωνα με το ακόλουθο παράδειγμα:
Τοποθετήστε όλα τα στοιχεία σύμφωνα με το ακόλουθο παράδειγμα:
