Introduction à la mise en page Holy Grail et à la mise en page Double Flying Wing en CSS (avec code)

<div>#header</div>

  <div>
    <div>#center</div>
    <div>#left</div>
    <div>#right</div>
  </div>

  <div>#footer</div>

    body {
      min-width: 500px;
    }
    #container {
      overflow: auto;        /* BFC */
      padding-left: 180px;
      padding-right: 150px;
    }
    #container .column {
      height: 200px;
      position: relative;
      float: left;
    }
    #center {
      background-color: #e9e9e9;
      width: 100%;
    }
    #left {
      background-color: red;
      width: 180px;
      right: 180px; 
      margin-left: -100%
    }
    #right {
      background-color: blue;
      width: 150px; 
      margin-right: -150px;
    }

    #header, 
    #footer {
      background-color: #c9c9c9;
    }

  <div>#header</div>

  <div>
    <div>#center</div>
    <div>#left</div>
    <div>#right</div>
  </div>

  <div>#footer</div>
    body {
      min-width: 550px;  
    }
    #HolyGrail {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    #container {
      display: flex;
      flex: 1;
    }
    #center {
      background-color: #e9e9e9;
      flex: 1;
    }
    #left {
      background-color: red;
      order: -1;
      width: 150px;
    }
    #right {
      background-color: blue;
      width: 150px;
    }
    #header, 
    #footer {
      height: 50px;
      background-color: #c9c9c9;
    }
Copier après la connexion
Si les navigateurs ie10 et inférieurs ne sont pas pris en compte, alors La mise en page du Saint Graal peut être réalisée en utilisant flex. Et la disposition du Saint Graal peut donner au pied de page un effet collant en laissant le conteneur remplir toute la hauteur. 
Compatibilité flexible
Disposition double aile volante

Les problèmes résolus par la disposition Saint Graal et la disposition double aile volante sont les mêmes, c'est-à-dire une mise en page à trois colonnes avec une largeur fixe des deux côtés et une colonne centrale adaptative. La colonne du milieu doit être placée devant le flux de documents pour un rendu prioritaire. La solution au problème de la disposition du Saint Graal et de la disposition à double aile est la même dans la première moitié, c'est-à-dire que les trois colonnes sont flottantes, mais les colonnes de gauche et de droite sont ajoutées avec des marges négatives pour les rendre côte à côte. avec la colonne du milieu p pour former une disposition à trois colonnes. La différence réside dans l' idée de​​résoudre le blocage du contenu intermédiaire

La mise en page du Saint Graal utilise des éléments d'habillage pour empêcher le contenu intermédiaire de en cours de modificationpadding-left et padding-right pour placer le contenu p au milieu, puis utiliser le positionnement relatif position:relative et utiliser les attributs right ou left pour que les colonnes gauche et droite ne soient pas le contenu du milieu. 
La solution à la disposition à double aile consiste à ajouter un p à l'intérieur de l'élément central pour placer le contenu, puis à utiliser les marges gauche et droite margin-left et margin-right pour ajouter un p dans les marges gauche et droite. Faites de la place pour la colonne. 
La mise en page à double aile a une balise p de plus et 4 attributs CSS de moins. Moins de padding-left et padding-right sont utilisés. Les p gauche et droit utilisent la position de disposition relative : relative et les droite et gauche correspondantes, ainsi que les marges gauche et marginale droite sont davantage utilisées. 

<div>#header</div>

  <div>
    <div>
      <div>#center</div>
    </div>
    <div>#left</div>
    <div>#right</div>
  </div>

  <div>#footer</div>
Copier après la connexion
    body {
      min-width: 500px;  
    }
    #container {
      overflow: auto;        /* BFC */
    }
    #container .column {
      height: 200px;
      float: left;
    }
    #center {
      background-color: #e9e9e9;
      width: 100%;
    }
    #center-content {
      margin-left: 180px;
      margin-right: 150px;
    } 
    #left {
      width: 180px;
      background-color: red;
      margin-left: -100%;
    }
    #right {
      background-color: blue;
      width: 150px;  
      margin-left: -150px; 
    }

    #header, 
    #footer {
      background-color: #c9c9c9;
    }
Copier après la connexion
 Articles connexes recommandés : 
Comment implémenter le retour à la ligne d'éléments flottants en CSS
Résumé de l'utilisation de la disposition Grid en CSS (avec code)