Grilă cu 12 coloane în CSS

Layout Grid CSS pe 12 coloane

Dintre modurile de a organiza conținutul unei pagini web, o grilă pe 12 coloane se remarcă prin faptul că este și comună, și flexibilă, în special pentru design responsive.

Ea împarte spațiul orizontal disponibil în 12 coloane de lățime egală, ceea ce îți oferă o structură precisă pentru plasarea și dimensionarea elementelor.

Beneficiile unei grile pe 12 coloane

Flexibilitate: Numărul 12 se împarte ușor, așa că sunt posibile jumătăți (2 coloane de 6), treimi (3 coloane de 4) și sferturi (4 coloane de 3).
Responsivitate: Cu media queries, această grilă se potrivește website-urilor responsive, permițându-le să se adapteze la dimensiunile de ecran de desktop, tabletă sau mobil.
Eficiență: Munca de design merge mai repede când structura grilei este deja definită.

Pașii de mai jos construiesc un layout CSS Grid de bază pe 12 coloane:

Definește Containerul Grid

Containerul grid trebuie să aibă display: grid;.

Creează cele 12 coloane

Cele 12 coloane sunt definite prin proprietatea grid-template-columns.

Dacă scrii repeat(12, [col-start] 1fr);, obții 12 coloane de lățime egală, iar fiecare pistă de coloană are linia de start numită col-start. Pe rând:

repeat(12, ..) — execută definiția pistei de 12 ori, creând 12 coloane.
[col-start] — numește o linie de grilă. Repetarea dă 12 linii numite col-start, ceea ce ajută când elementele grid trebuie să înceapă în puncte specifice.
1fr — o unitate fracțională, care valorează o fracțiune din tot spațiul disponibil. Astfel, toate cele 12 coloane primesc o lățime egală, fluidă.

Plasează elementele Grid

Poziționează și dimensionează elementele grid pe cele 12 coloane cu grid-column.

Pentru un element care se întinde pe un anumit număr de coloane, scrie grid-column: span <number>; sau grid-column: <start-line> / span <number>;.
Ca să spui exact pe ce linii ale grilei începe și se termină un element, scrie grid-column: <start-line> / <end-line>;.

Folosește Media Queries pentru a adăuga puncte de întrerupere

Pornește întotdeauna de la mobil: sub 576 de pixeli lățime, secțiunile apar în ordinea din sursă, stivuite, cu prima în partea de sus.

Între 576 și 767 de pixeli lățime, layout-ul are două coloane.

Peste 767 de pixeli lățime, are trei.

Exemplu

Iată întregul layout grid responsive pe 12 coloane, cu secțiuni de header, navigare, conținut, bară laterală, reclame și footer.

Creează un layout CSS Grid responsive pe 12 coloane cu un header, navigare, zonă de conținut, bară laterală, secțiune de reclame și footer. Folosește linii de grilă numite cu `repeat(12, [col-start] 1fr)`. Aplică un design mobil întâi: stivuiește toate secțiunile vertical implicit, comută la un layout pe două coloane la 576px și la un layout pe trei coloane la 768px. Stilizează fiecare secțiune cu un chenar verde și fundal bej.

> Output: complete HTML page

Prompt

Creează un layout CSS Grid responsive pe 12 coloane cu un header, navigare, zonă de conținut, bară laterală, secțiune de reclame și footer. Folosește linii de grilă numite cu repeat(12, [col-start] 1fr). Aplică un design mobil întâi: stivuiește toate secțiunile vertical implicit, comută la un layout pe două coloane la 576px și la un layout pe trei coloane la 768px. Stilizează fiecare secțiune cu un chenar verde și fundal bej.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 12-Column Grid Layout</title>
<style>
* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 20px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile first */
.container > * {
  border: 1px solid green;
  background-color: beige;
  padding: 10px;
  grid-column: col-start / span 12;
}

@media (min-width: 576px) {
  .sidebar {
    grid-column: col-start / span 3;
    grid-row: 3;
  }
  .ads {
    grid-column: col-start / span 3;
  }
  .content, .footer {
    grid-column: col-start 4 / span 9;
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }
}

@media (min-width: 768px) {
  .nav {
    grid-column: col-start / span 2;
    grid-row: 2 / 4;
  }
  .content {
    grid-column: col-start 3 / span 8;
    grid-row: 2 / 4;
  }
  .sidebar {
    grid-column: col-start 11 / span 2;
  }
  .ads {
    grid-column: col-start 11 / span 2;
  }
  .footer {
    grid-column: col-start / span 12;
  }
  nav ul {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<div class="container">
  <header class="header">
    <h2>Header</h2>
  </header>
  <nav class="nav">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </nav>
  <main class="content">
    <h2>Content</h2>
    <p>This is the main content area. It spans different numbers of columns depending on the screen size.</p>
    <p>On mobile, all sections stack vertically. On medium screens, content takes 9 columns. On large screens, content takes 8 columns with navigation and sidebar on either side.</p>
  </main>
  <aside class="sidebar">
    <h3>Sidebar</h3>
    <p>Sidebar content goes here.</p>
  </aside>
  <aside class="ads">
    <h3>Ads</h3>
    <p>Advertisement area.</p>
  </aside>
  <footer class="footer">
    <p>Footer - spans all 12 columns</p>
  </footer>
</div>

</body>
</html>