Μονάδα Διανύσματος CSS

Header
Menu
Main
Right
Footer

Προσπάθησε Ζωντανά

Grid Layout

The CSS Grid Layout Module provides a grid-based layout system with rows and columns, making web page design easier without the need for floats and positioning.

Browser Support

All modern browsers support the grid properties.

57.0 16.0 52.0 10 44

Grid Elements

The grid layout consists of a parent element and one or more child elements.

Παράδειγμα

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9

Προσπάθησε Ζωντανά

Display Property

When the HTML element's display The attribute is set to grid or inline-grid when it becomes a grid container.

Παράδειγμα

.grid-container {
  display: grid;
}

Προσπάθησε Ζωντανά

Παράδειγμα

.grid-container {
  display: inline-grid;
}

Προσπάθησε Ζωντανά

All direct child elements of the grid container will automatically become grid items.

Grid Columns (Grid Columns)

The vertical line of grid items is called a column.

Grid Rows (Grid Rows)

The horizontal line of grid items is called a row.

Grid Gaps (Grid Gaps)

The space between each column/row is called a gap.

You can adjust the gap size by using one of the following attributes:

  • grid-column-gap
  • grid-row-gap
  • grid-gap

Παράδειγμα

grid-column-gap This attribute sets the gap between columns:

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

Προσπάθησε Ζωντανά

Παράδειγμα

grid-row-gap This attribute sets the gap between rows:

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

Προσπάθησε Ζωντανά

Παράδειγμα

grid-gap This attribute is a shorthand for the grid-row-gap and grid-column-gap attributes:

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

Προσπάθησε Ζωντανά

Παράδειγμα

grid-gap The attribute can also be used to set the row gap and column gap to a single value:

.grid-container {
  display: grid;
  grid-gap: 50px;
}

Προσπάθησε Ζωντανά

Γραμμές Διανύσματος (Grid Lines)

Οι γραμμές μεταξύ των στηλών ονομάζονται γραμμές στηλής (γραμμές στηλής).

Οι γραμμές μεταξύ των γραμμών ονομάζονται γραμμές γραμμής (γραμμές γραμμής).

Όταν τοποθετείτε το στοιχείο δίκτυου στο κουτί δίκτυου, αναφέρετε τον αριθμό της γραμμής:

Παράδειγμα

Τοποθέτησε το στοιχείο δίκτυου στη γραμμή γραμμής 1 και τελείωσε το στην γραμμή γραμμής 3:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Προσπάθησε Ζωντανά

Παράδειγμα

Τοποθέτησε το στοιχείο δίκτυου στη γραμμή γραμμής 1 και τελείωσε το στην γραμμή γραμμής 3:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

Προσπάθησε Ζωντανά