Clever Geek Handbook

Le guide visuel complet / Aide-mémoire pour la grille CSS



Aujourd'hui, nous allons examiner les propriétés CSS Grid



(ci-après également appelées Grid) qui vous permettent de créer des mises en page réactives ou réactives de pages Web. Je vais essayer d'expliquer brièvement mais complètement le fonctionnement de chaque propriété.







Qu'est-ce que c'est CSS Grid



?





Grid est une mise en page d'un site (son schéma, son projet).







- ( , ). , . , , .







, .























CSS Grid





? (grid items) (main) (cross) (axis). .









, , Excel



, , (Flexbox



).







, , .







CSS Grid







, . :







  • ( -)
  • ( -)


: :











, .











HTML



, CSS



VSCode



( ). :







  1. , , Project1



    (cd Project1



    , code .



    )
  2. index.html



    style.css



  3. VSCode



    (Live Server



    , )


Codepen



( ) .







, .









HTML





3 body



:







<div class="container">
  <div class="box-1"> A </div>
  <div class="box-2"> B </div>
  <div class="box-3"> C </div>
</div>


CSS





1







:







* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


2







body



:







body {
  font-family: sans-serif;
  font-size: 40px;
  width: 100%;
  min-height: 100vh;
}


3







:







[class^="box-"] {
  background-color: skyblue;
  /*     */
  display: grid;
  place-items: center;
}


, .







4







:







.container {
  display: grid;
  gap: 20px;
}


-





.









.container



, — .box-*



.







-





.







grid-template-columns







. , , repeat()



.











style.css



:







.container {
  display: grid;
  gap: 20px;

  /* ! */
  grid-template-columns: 200px auto 100px;
}


:







  • . auto



  • fr



    () repeat()



    ,


grid-template-rows







. , , repeat()



.











style.css



:







.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  /* ! */
  grid-template-rows: 200px auto 100px;
}


grid-template-areas







, (grid cell), , .









:









, :







  • grid-template-areas



    : ,
  • grid-area



    : , 








.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  /* ! */
  grid-template-areas:
    "A A A A   A A A A   A A A A"
    "B B B B   B B B B   B B C C"
    "B B B B   B B B B   B B C C";
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    








.box-1 {
  grid-area: A;
}
.box-2 {
  grid-area: B;
}
.box-3 {
  grid-area: C;
}


: grid-area



, .







column-gap







.









style.css



:







.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 100px 100px 100px;

  /* ! */
  column-gap:  50px;
}


: column-gap



grid-template-columns



.







row-gap







.









style.css



:







.container {
  display: grid;
  height: 100vh;
  grid-template-rows: 100px 100px 100px;

  /* ! */
  row-gap:  50px;
}


: row-gap



grid-template-rows



.







justify-items









- - . 4 :











HTML



:







<div class="container">

  <!--    A, B, C -->

  <div class="box-4"> D </div>
</div


CSS



:







.container {
  display: grid;
  gap: 50px;
  height: 100vh;

  /*     200px  200px */
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

  /* ! */
  justify-items : end;
}


align-items









- - . 4 :









style.css



:







.container {
  display: grid;
  gap: 50px;
  height: 100vh;
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

  /* ! */
  align-items: center;
}


justify-content









- . 7 :











style.css



:







.container {
  display: grid;
  gap: 50px;
  height: 100vh;
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

  /* ! */
  justify-content: center;
}


align-content









- . 7 :











style.css



:







.container {
  display: grid;
  gap: 50px;
  height: 100vh;
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

  /* ! */
  align-content : center;
}


-





CSS Grid







, . :







  • (1, 2, 3 ..)
  • span







:









index.html



:







<div class="container">
  <div class="box-1"> A </div>
  <div class="box-2"> B </div>
  <div class="box-3"> C </div>
  <div class="box-4"> D </div>
</div>


repeat()



/ /. :







grid-template-columns : repeat(4, 1fr);


:







grid-template-columns : 1fr 1fr 1fr 1fr;










fr



, .







grid-template-columns : repeat(4, 1fr);


4 .







!







grid-columns: start/end









. :







  • grid-column-start



  • grid-column-end





style.css



:







.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}


:









12 , . 1 1 . 8 .







, :







.box-1 {}
.box-2 {}
.box-3 {}
.box-4 {}


. — .









.box-*



(scale):







grid-column-start: 1;
grid-column-end: 2;

/*  */
grid-column: 1 / 2


span



:







grid-column : span 1;


"" 8 .box-1



:







.box-1 {
  grid-column: 1 / 10
}


:















? box-1



1 . , 8 . 1 . : 8 + 1 + 1 = 10.







span









, span



.







box-1



8 :







.box-1 {
  grid-column: span 9;
}


.







grid-row: start/end









. :







  • grid-row-start



  • grid-row-end





:









box-1



9 :







.box-1 {
  grid-row : 1 / 11;
}


: box-1



1 + 9 + 1 , 9 + 1 + 1 = 11.







span



:







.box-1 {
  grid-row: span 10;
}


:









grid-area









grid-temlate-areas



, . , :









grid-template-areas



:









style.css



:







.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-areas:
    "A A A A   A A A A   A A A A"
    "B B B B   B B B B   B B C C"
    "B B B B   B B B B   B B C C";
}


grid-area



:









style.css



:







.box-1 {
  grid-area: A;
}
.box-2 {
  grid-area: B;
}
.box-3 {
  grid-area: C;
}


justify-self









- . 4 :









style.css



:







.container {
  display: grid;
  gap :25px;
  height: 100vh;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.box-1 {
  /* ! */
  justify-self : start;
}


align-self









- . 4 :









style.css



:







.container {
  display: grid;
  gap :25px;
  height: 100vh;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}
.box-1 {
  /* ! */
  align-self : start;
}


CSS Grid





  • place-content



  • place-items



  • place-self



  • grid-template



  • gap



    / grid-gap





place-content











:







  • align-content



  • justify-content





:







align-content: center;
justify-content: end;

/* ! */
place-content: center / end;


place-items











:







  • align-items



  • justify-items





:







align-items: end;
justify-items: center;

/* ! */
place-items: end / center;


place-self











:







  • align-self



  • justify-self





:







align-self: start;
justify-self: end;

/* ! */
place-self: start / end;


grid-template











:







  • grid-template-rows



  • grid-template-columns





:







grid-template-rows: 100px 100px;
grid-template-columns: 200px 200px;

/* ! */
grid-template: 100px 100px / 200px 200px;


gap/grid-gap











:







  • row-gap



  • columns-gap





:







row-gap: 20px ;
column-gap: 30px ;

/* ! */
gap: 20px  30px;




-.









VPS- NVM- . ISO.













More articles:


All Articles