Grilă responsivă în CSS

Ce este un Grid-View?

Un grid-view împarte o pagină în rânduri și coloane, iar multe pagini web sunt construite pe unul.

Grid-view-urile responsive folosesc adesea 6 sau 12 coloane și se micșorează și se extind odată cu fereastra browserului.

Construirea unui Grid View

Înainte de orice altceva, dă fiecărui element HTML valoarea border-box pentru box-sizing. Astfel, lățimea și înălțimea totală a unui element includ padding-ul și chenarul.

Pune această regulă în partea de sus a CSS-ului tău:

Resetare box-sizing

Datorită selectorului universal, fiecare element din pagină primește box-sizing: border-box.

styles.css 
* {
  box-sizing: border-box;
}

HTML-ul

Containerul grid conține cinci elemente de grilă: un antet, un meniu, conținut principal, o secțiune de fapte și un subsol.

Structura HTML a grilei

Iată tot HTML-ul aspectului de grilă. Fiecare secțiune are propriul <div>, iar numele clasei este cel care îl leagă de o zonă a grilei.

index.html 
<div class="grid-container">

  <div class="header"><h1>Chania</h1></div>

  <div class="menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="content">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete.</p>
    <p>The city can be divided in two parts, the old town and the modern city. The old town is situated next to the old harbour and is the matrix around which the whole urban area was developed.</p>
    <p>Chania lies along the north west coast of the island Crete.</p>
  </div>

  <div class="facts">
    <h2>Facts:</h2>
    <ul>
      <li>Chania is a city on the island of Crete</li>
      <li>Crete is a Greek island in the Mediterranean Sea</li>
    </ul>
  </div>

  <div class="footer"><p>A footer.</p></div>

</div>

CSS-ul

Stilurile și culorile îmbunătățesc apoi aspectul de grilă.

Notă: Capitolul următor arată cum gestionează media queries și punctele de întrerupere dimensiunile diferite de ecran.

Exemplu

Iată tot CSS-ul aspectului de grilă. Zonele numite pentru fiecare secțiune vin din grid-template-areas, iar antetul, meniul, conținutul, faptele și subsolul primesc culorile și spațierea lor.

Prompt
Creați o pagină cu aspect de tip grilă responsivă despre orașul Chania. Folosiți CSS Grid cu zone de șablon numite pentru antet, meniu, conținut principal, bara laterală de fapte și subsol. Stilizați cu un antet mov, elemente de meniu albastre cu efecte la trecerea cursorului, o casetă de fapte cu fundal bej și chenar, și un subsol albastru. Aplicați box-sizing: border-box tuturor elementelor.
Rezultat: pagină HTML completă