Grid Template Areas css html div wordpress

Logo cursus traing wordpress

Grid Template Areas css html div wordpress

Grid 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.

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.

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 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



  
    
    CSS Grid Layout With Background Image
    
  
  

    

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.

grid template met div css grid auto flow dense
grid template met div css grid auto flow dense

Handleiding grid-auto-flow

Meer handleidingen Grid Template Areas en css

Getting Started with CSS Grid

Learncssgrid.com

https://web.dev/learn/css/grid/

Grid calculator op Fjolt.com

Veel gestelde vragen over CSS grid templates

https://stackoverflow.com/questions/46698119/css-grids-different-gap-between-each-grid

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

grid-template-areas

See the Pen Grid – grid template areas by Ben Weiser (@benweiser) on CodePen.


Meer weten over Grid Template Areas css html div wordpressof info?

Wil je meer weten? Veel lezers met interesse in Grid Template Areas css html div wordpress bekeken ook de onderstaande artikelen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je WordPress website beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je WordPress website sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over Grid Template Areas css html div wordpress?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, Grid Template Areas css html div wordpress en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven