Το μοντέλο Grid (Grid Layout Module)

Με το grid μπορείτε να δημιουργήσετε responsive layouts ορίζοντας από την αρχή γραμμές (rows) και στήλες (columns) καθώς και τις διαστάσεις και συμπεριφορά αυτών σε αλλαγές χωρίς να χρειάζονται άλλες τεχνικές όπως floats και positioning.

Βασικές έννοιες

Οι παρακάτω όροι - έννοιες είναι απαραίτητες για την περιγραφή του grid.

  • grid container
  • grid items
  • grid lines
  • track
  • grid cell
  • columns και rows
  • grid area
  • gutters - gap
  • inline axis ή row axis
  • block axis ή column axis
  • explicit
  • implicit
  • minmax()
  • min-content, max-content
  • auto

grid container

Είναι το html στοιχείο που ορίζει (περιέχει) το grid. Συνήθως ένα div.

div#container {
	display: grid;

}

grid items

Τα άμεσα παιδιά (direct children) του grid container θεωρούνται αυτόματα grid items.

<head>
	<style>
	div#container {
		display: grid;

	}
	</style>
</head>
<body>
	<div id = "container">
	<div>grid item 1</div>
	<div>grid item 2</div>
	<div>grid item 3</div>
	<div>grid item 4</div>
	<div>grid_item_5</div>
	</div>
</body>

grid lines

Είναι οι οριζόντιες και κάθετες νοητές γραμμές που χωρίζουν το grid σε στήλες και γραμμές.

Για παράδειγμα το παρακάτω grid έχει 3 οριζόντιες και 4 κάθετες γραμμές.

Οι γραμμές αριθμώνται από αριστερά προς τα δεξιά για τις κάθετες και από πάνω προς τα κάτω για τις οριζόντιες όπως φαίνεται και στο σχήμα.

grid lines

Ονοματισμός γραμμών

Οι γραμμές μπορούν να ονοματιστούν και να αναφέρονται με το όνομά τους όπου χρειάζεται.

Για παράδειγμα:

grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];

Οι 4 κάθετες γραμμές έχουν ονοματιστεί: [col1-start], [col2-start], [col3-start], [cols-end]

Οι 3 οριζόντιες γραμμές έχουν ονοματιστεί: [row1-start], [row2-start], [rows-end]

Το fr (fraction) είναι σχετική μονάδα μέτρησης και ορίζει τις αποστάσεις ανάμεσα στις γραμμές.

track

Ορίζεται ως ο χώρος ανάμεσα σε δύο γραμμές. Μπορούμε να έχουμε column tracks όπως και row tracks.

track

grid cell

Ορίζεται ως ο μικρότερος χώρος σε ένα grid. Παρόμοιο με το κελί πίνακα.

grid_cell

columns και rows

column είναι ένα κάθετο track και row είναι ένα οριζόντιο track.

grid_columns

grid_rows

grid area

Ορθογώνιο που αποτελείται από ένα ή περισσότερα κελιά.

grid area

gutters

Ο κενός χώρος ανάμεσα σε οριζόντια και κάθετα tracks.

grid_gaps

inline axis ή row axis

Ο οριζόντιος άξονας.

block axis ή column axis

Ο κάθετος άξονας.

explicit

Όταν ρητά ορίζεται ο αριθμός και διαστάσεις στηλών ή γραμμών. Συνήθως με την ιδιότητα: grid-template-columns ή grid-template-rows.

implicit

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

minmax()

Συνάρτηση που ορίζει όριο για ελάχιστη ή ίση τιμή και μέγιστη ή ίση τιμή.

Για παράδειγμα:

minmax(200px, 1fr)