Grid Template Areas css html div wordpress

Grid template areas (CSS Grid Layout) vind ik een heel goed hulpmiddel om een pagina in hoofdgebieden te verdelen of om groottes, posities en verhoudingen te definiëren.

IN DEZE HANDLEIDING:

1 CSS Layouts met Grid Template Areas
2 Meer handleidingen Grid Template Areas en css
3 Voorbeelden Grid Template Areas en css
4 Met de fr-eenheid minder wiskunde
5 CSS grid rasterindeling met achtergrond afbeelding
6 Grid-auto-flow

CSS Layouts met Grid Template Areas

De Grid layout is compatibel met de overgrote meerderheid van de browsers. Het is ook bekend als het tweedimensionale opmaaksysteem dat ons het beste alternatief biedt voor de tabellen die we in het verleden gebruikten, en heeft onze gebruikersinterfaces naar een hoger niveau getild.

De rasterindeling stelt ons in staat de elementen in kolommen en rijen uit te lijnen, de elementen te plaatsen ten opzichte van het containerelement, de child-elementen te positioneren door ze te overlappen of lagen te vormen, naast andere functies. Dit vergemakkelijkt de creatie van dynamische en responsieve lay-outs, zoals we zullen zien in dit artikel.

Meer handleidingen Grid Template Areas en css

Hoewel we in dit artikel de eerste concepten en een paar use cases, tips en trucs zullen zien, raad ik aan dat als je geïnteresseerd bent in het kennen van de ins en outs van Grid, je een kijkje neemt bij deze bronnen.

Understanding CSS Grid Series door Rachel Andrew at Smashing Magazine
Learn CSS Grid course door Wes Bos
A Complete Guide to Grid door Chris House at CSS-Tricks

Voorbeelden Grid Template Areas en css

See the Pen Another way of defining grid-areas by CSS GRID (@cssgrid) on CodePen.

See the Pen preserving auto-placement with position: absolute by CSS GRID (@cssgrid) on CodePen.

Met de fr-eenheid minder wiskunde

De fr-eenheid helpt bij het maken van flexibele rasterrails. Het vertegenwoordigt een fractie van de beschikbare ruimte in de rastercontainer (werkt zoals Flexbox’s eenheidsloze waarden).

Laten we zeggen dat we ons raster willen verdelen in vier gelijke kolommen. Het is gemakkelijk om de percentages uit te rekenen. We schrijven gewoon grid-template-kolommen:
25% 25% 25% 25%.

Wat als we dan gebruik willen maken van de grid-gap eigenschap? grid-gap: 10px. We hebben drie openingen tussen onze kolommen, dus onze rasterbreedte zal nu 100% + 30px zijn en ongewenst horizontaal scrollen zal verschijnen met wat inhoud die aan de rechterkant het scherm overspoelt. We zouden gebruik kunnen maken van calc om ons probleem op te lossen, maar de fr eenheid gebruiken is veel eenvoudiger: grid-template-columns:
1fr 1fr 1fr 1fr.

See the Pen fr unit vs percentage by CSS GRID (@cssgrid) on CodePen.

See the Pen Untitled by Keith J. Grant (@keithjgrant) on CodePen.

CSS grid rasterindeling met achtergrond afbeelding

Html code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>CSS Grid Layout With Background Image</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <div class="container">
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
      <div class="bg"></div>
    </div>

  </body>
</html>

CSS

body{
  margin: 15px;
  padding: 0;
}

.bg{
  background: url(1.jpg);
}

.container{
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(3, 1fr);
}

.container div{
  height: 220px;
  background-size: cover;
  background-attachment: fixed;
}

.container div:nth-child(1){
  grid-column: 1 / 3;
}

.container div:nth-child(7){
  grid-column: 2 / 4;
}

.container div:nth-child(11){
  grid-column: 1 / 4;
}

Grid-auto-flow

De CSS-eigenschap grid-auto-flow maakt deel uit van de CSS Grid Layout-specificatie waarmee we de stroom van rasteritems kunnen controleren die automatisch worden geplaatst als ze niet expliciet zijn gepositioneerd met eigenschappen voor rasterplaatsing.