3 minutes
Créer La Même Mise En Page avec Grid et Flexbox
Dernière mise à jour: 21 mars, 2022Créer une mise en page qui fonctionne simplement peut parfois être délicat. Mais il est possible de créer des mises en page fonctionnellement similaires en utilisant à la fois une grid et une flexbox. Ici, dans ce post, j'ai créé 3 mises en page différentes à titre d'exemples.
§Exemple de Boite
<body>
<div class="flexbox-container">
<h2 class="wide-3">Boxes</h2>
<div class="item-box item-1 wide-2">1</div>
<div class="item-box item-2">2</div>
<div class="item-box item-3 wide-2">3</div>
<div class="item-box item-4 wide-2">4</div>
<div class="item-box item-5 wide-3">5</div>
<div class="item-box item-6">6</div>
<div class="item-box item-7 wide-3">7</div>
<div class="item-box item-8">8</div>
<div class="item-box item-9 wide-2">9</div>
<div class="item-box item-10">10</div>
<div class="item-box item-11">11</div>
<div class="item-box item-12 wide-2">12</div>
</div>
</body>
Flexbox CSS:
body{ background: #3b094b; }
.item-box{
min-height: 50px;
display: grid;
justify-content: center;
align-items: center;
font-size: 30px;
width: 30%;
margin-left: 1%;
margin-right: 1%;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
text-align: center;
font-size: 50px;
padding: 0;
color: #fae1dd;
}
.item-1{ background: #8cdeff;}
.item-2{ background: #005f73; }
.item-3{ background: #0a9396; order: 2; }
.item-4{ background: #94d2bd; order:4; }
.item-5{ background: #e9d8a6; order:5; }
.item-6{ background: #ee9b00; order:3; }
.item-7{ background: #ca6702; order:7; }
.item-8{ background: #bb3e03; order:4; }
.item-9{ background: #ae2012; order:9; }
.item-10{ background: #9b2226; order:10; }
.item-11{ background: #fae1dd; order:11; }
.item-12{ background: #ffd7ba; order:12; }
.flexbox-container{
margin: 0 auto;
display: flex;
flex-wrap: wrap;
max-width: 960px;
}
.wide-2 { width: 66%; }
.wide-3 { width: 100%; }
Grid CSS:
body{ background: #3b094b; }
.item-box{
min-height: 50px;
display: grid;
justify-content: center;
align-items: center;
font-size: 30px;
}
h2{
text-align: center;
font-size: 50px;
padding: 0;
color: #fae1dd;
}
.item-1{background: #8cdeff;}
.item-2{background: #005f73;}
.item-3{background: #0a9396;}
.item-4{background: #94d2bd;}
.item-5{background: #e9d8a6;}
.item-6{background: #ee9b00;}
.item-7{background: #ca6702;}
.item-8{background: #bb3e03;}
.item-9{background: #ae2012;}
.item-10{background: #9b2226;}
.item-11{background: #fae1dd;}
.item-12{background: #ffd7ba;}
.grid-container{
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
grid-auto-flow: dense;
max-width: 960px;
}
.wide-2 { grid-column: span 2; }
.wide-3 { grid-column: span 3; }
Avec l'aide des valeurs "span" fournies par la disposition de la "grid", il est très facile d'ajuster les tailles. "grid-gap" nos permet de garder une distance constante entre les éléments de la grid. La distance que j'ai créé entre les éléments dans l'exemple de la boîte flexbox est calculée en divisant la valeur (en pourcentage) qui n'a pas été utilisée par les éléments par quatre, pour les "margin-top", "margin-bottom", "margin-left" et "margin-right". grid-gap semble beaucoup plus utile en ce qui concerne la distance entre le éléments. Changer des détails simples avec les distances peut devenir un cauchemar sur un projet plus important si vous utilisez flexbox.
De plus, l'utilisation des espaces vides qui apparaîtront après avoir donné à vos items (articles) certaines tailles peut être facilement traitée dans la disposition de la grid. Choisissez simplement l'option "grid-auto-flow: dense;" et la grid remplira automatiquement ces points avec les éléments qui correspondent. L'alternative à cela dans flexbox (que j'ai pu trouver) est la propriété "order". Avec l'aide de la propriété de la "order", vous pouvez remplir les espaces vides qui pourraient apparaître dans votre mise en page. Je trouve que cette méthode est très sujette aux erreurs. De plus, vous devez travailler sur votre mise en page pour différentes tailles et modifier également la "order".
§Navigation Bar
<body>
<nav class="navbar">
<img src="/very-cool-logo.png" alt="brand logo">
<ul class="navbar-items">
<li class="navbar-item">About</li>
<li class="navbar-item">Blog</li>
<li class="navbar-item">Cat Pics</li>
<li class="navbar-item">Contact Us</li>
</ul>
</nav>
<h1>Flexbox vs Grid Layout</h1>
</body>
Grid CSS;
body {
background: #227c9dff;
padding: 0;
margin: 0;
}
.navbar {
margin: 0 auto;
display: grid;
grid-template-columns: auto auto;
justify-content: space-between;
background: white;
max-width: 960px;
height: 100px;
}
.brand-logo { height: 100px; }
.navbar-items {
list-style: none;
display: grid;
grid-template-columns: auto auto auto auto;
max-width: 550px;
}
.navbar-item {
font-size: 2rem;
margin: 10px;
}
.navbar-item:hover { cursor: pointer; }
h1 {
font-size: 3rem;
text-align: center;
color: aliceblue;
}
Flexbox CSS;
body {
background: #227c9dff;
padding: 0;
margin: 0;
}
.navbar {
margin: 0 auto;
display: flex;
flex-direction: row;
background: white;
max-width: 960px;
height: 100px;
}
.navbar-items {
list-style: none;
margin-left: auto;
display: flex; }
.navbar-item { font-size: 2rem; margin: 10px; }
.navbar-item:hover { cursor: pointer; }
h1 {
font-size: 3rem;
text-align: center;
color: aliceblue;
}
L'exemple de la navbar très simple, mais il montre où utiliser efficacement flexbox.
La création de la navbar avec la grid était assez simple mais j'ai dû définir une certaine propriété de "height" pour l'image du logo. D'après ce que j'ai appris jusqu'à présent, ce n'est pas quelque chose que nous voulons faire très souvent. En ce qui concerne les mises en page réactives, la définition de certaines widths (largeurs) et heights (hauteurs) me fait un peu peur. J'évite donc autant que possible de définir des valeurs de height. Le reste de la mise en page était assez simple et je gardais également mon logo et mes "a" tags séparés, j'ai utilisé "justify-content: space-between".
With flexbox first of all I didn't have to set a height for my logo, which makes me sleep better at night. Keeping the a tags on ht eopposite site of my logo was possible with the help of "margin-left: auto". The same trick can be used to keep your footer at the bottom of your page. Give you are body a flex value and boom you made it.
Avec flexbox tout d'abord, je n'ai pas eu à définir une height pour mon logo, ce qui me donne plus confiance en mon code. Garder les "a" tags sur le site opposé de mon logo a été possible avec l'aide de "margin-left: auto". La même astuce peut être utilisée pour garder votre footer (pied de page) en bas de votre page. Donnez à votre body une valeur de flex et voilà vous l'avez fait.
§Mise en Page;
<body>
<div class="content-container">
<h1 class="page-title">Awesome Web Page About Cool Stuff | Grid vs Flexbox Layout</h1>
<div class="left-container">
<img class="avatar-pic" src="./wolf.png" alt="avatar">
<h3>Author Info</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. amet consectetur adipisicing elit. Earum ipsam quidem enim itaque autem sed temporibus quia, et necessitatibus delectus consectetur animi doloremque architecto similique eaque possimus, ducimus aliquid voluptate!
Voluptas nobis mollitia, accusamus suscipit
</p>
</div>
<div class="deal-container">
<h3 class="deal-title">Some Deal you should know about</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ipsam quidem enim itaque autem sed temporibus quia, et necessitatibus delectus consectetur animi doloremque architecto similique eaque possimus, ducimus aliquid voluptate!
Voluptas nobis mollitia, accusamus suscipit quod, sed illo deserunt sapiente non eius incidunt nihil quis nam unde ratione at odit recusandae enim voluptatem, natus alias. Accusamus, dignissimos! Quisquam, veniam nemo.</p>
</div>
<div class="blog-container">
<h2 class="blog-title">Blog Post</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam, harum reprehenderit. Ad ut officiis perspiciatis enim? Totam deleniti labore odio consectetur! Quia praesentium temporibus laboriosam quis quod atque, mollitia sunt.
</p>
<h3 id="a-title">A title</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam, harum reprehenderit. Ad ut officiis perspiciatis enim? Totam deleniti labore odio consectetur! Quia praesentium temporibus laboriosam quis quod atque, mollitia sunt.
</p>
<h3 id="another-title">Another title</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet accusantium ut, expedita eaque quaerat adipisci, numquam, ipsam maiores voluptatum quis dicta explicabo doloremque? Modi et natus temporibus fugiat quae! Saepe!
</p>
<h3 id="third-title">Third title</h3>
<p>
Voluptates laborum velit, nostrum architecto a aperiam! Quisquam quo dolorem officiis eveniet labore assumenda. Officia iste reprehenderit ut perferendis magnam commodi nostrum, ducimus ipsam quia accusamus ea autem? Illum, porro.
Excepturi magni enim necessitatibus voluptas qui repellendus, totam amet eveniet iste natus ipsum tenetur quod omnis magnam officia porro vitae dolores fuga doloremque asperiores tempora. Perspiciatis ipsa dolor quos deleniti.
Alias ab voluptatum similique quidem nihil nostrum dolore maxime consectetur saepe nobis odit hic, numquam, perferendis iusto sint magnam ipsam earum molestias, debitis veniam a. Rem dolor atque molestias nemo?
</p>
<h3 id="the-last-title">The Last Title</h3>
<p>
Ipsa nobis libero amet voluptate facilis, reiciendis illo corporis fugit, laudantium dolor atque quo temporibus sit illum dignissimos porro! A obcaecati velit ducimus molestiae provident doloremque, atque quaerat quam corrupti?
Numquam inventore maiores nobis! Culpa minima facilis repudiandae itaque doloribus, magni veniam sint, qui eius dolorum enim quod ipsa maxime quaerat esse alias nostrum architecto, vitae cupiditate voluptatibus repellendus! Earum?</p>
</div>
<div class="right-container">
<h3 class="toc-title">Table Of Contents</h3>
<ul>
<li><a href="#a-title">A Title</a></li>
<li><a href="#another-title">Another Title</a></li>
<li><a href="#third-title">Third Title</a></li>
<li><a href="#the-last-title">The Last Title</a></li>
</ul>
</div>
</div>
</body>
Grid CSS;
body {
padding: 0;
margin: 0;
background: #023047ff;
color: whitesmoke;
}
a { color: whitesmoke; font-size: 1.6rem; }
li {
list-style: none;
padding: none;
margin: none;
}
.content-container {
display:grid;
grid-template-columns: 3fr 5fr 2fr;
grid-gap: 30px;
justify-items: center;
}
.page-title { grid-column: 1 / -1; }
.left-container {
display: grid;
grid-template-columns: 1fr;
grid-gap: 5px;
justify-items: center;
background: rgba(0,0,0,.25);
padding: 20px;
}
.avatar-pic {
background: white;
border-radius: 50%;
max-width: 100px;
}
.author-container { padding: 5px; }
.author-info { background: red; }
.deal-container {
grid-column: 1/ 2;
grid-row: 3 / 4;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
}
.deal-title { font-size: 2.4rem; }
.blog-container { grid-row: span 3; }
.blog-title { font-size: 3rem; }
.blog-container > h3 { font-size: 2rem; }
.blog-container > p { font-size: 1.4rem; }
.right-container {
padding: 20px;
background: rgba(0,0,0,.25);
}
.toc-title {
font-size: 2rem;
text-align: center;
}
Flexbox CSS;
body {
padding: 0;
margin: 0;
background: #023047ff;
color: whitesmoke;
}
a {
color: whitesmoke;
font-size: 1.6rem;
}
li {
list-style: none;
padding: none;
margin: none;
}
.content-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-items: center;
}
.page-title {
text-align: center;
width: 100%;
}
.left-container {
display: flex;
flex-direction: column;
align-items: center;
height: 600px;
width: 27%;
justify-items: center;
padding: 20px;
}
.avatar-pic {
background: white;
border-radius: 50%;
max-width: 100px;
}
.author-container { padding: 5px; }
.deal-container { background: rgba(255, 255, 255, 0.1); }
.deal-title { font-size: 2.4rem; }
.blog-container { width: 48%; }
.blog-title { font-size: 3rem; }
.blog-container > h3 { font-size: 2rem; }
.blog-container > p { font-size: 1.4rem; }
.right-container {
height: 300px;
width: 20%;
padding: 5px;
background: rgba(0,0,0,.25);
}
.toc-title {
font-size: 2rem;
text-align: center;
}
Dans la partie mise en page, je voulais créer une page de blog très simple. Il y a de fortes chances que vous en ayez fait un ou que vous en fassiez un très bientôt. Garder une mise en page cohérente avec flexbox ressemblait à un cauchemar et je ne recommanderais pas du tout de l'essayer. Avant de commencer à faire ce post, j'ai décidé de garder une structure DOM cohérente pour la flexbox et la grid. Mais j'ai dû tricher un peu pour que la disposition de la flexbox fonctionne. Même avec l'aide de la propriété de "order", conserver plusieurs rangées d'éléments de tailles très différentes est tout simplement trop difficile et ne vaut certainement pas la peine.
Utiliser la grid, après avoir lutté avec flexbox, pour créer la même mise en page, c'était un jeu d'enfant. Tout d'abord, la possibilité d'étirer les éléments de la grid dans différentes cases de la grid rend la vie beaucoup plus facile. Votre article de blog est-il trop long, pas de problème, donnez-lui une "ligne de grid : durée 2" ou 3, ou 5, tout dépend de vous. Sur les côtés, vous pouvez afficher les informations sur l'auteur ou la table des matières dans des cases de taille appropriée.
§Conclusion & Mon Commentaire
I would definitely suggest using grid for larger elemetns or for a page. For smaller componenets like navbar or a div object that contians a bunch of image and some p tags you can go with flexbox. In almost every sceneraio I can think of we can use grid. However knowing what flexbox can do for your project helps you use css to the fullest. You can find the full code in here in this repository
Je suggérerais certainement d'utiliser la grid pour les éléments plus grands ou pour une page. Pour les composants plus petits comme la navbar ou un objet div qui contient un tas d'images et quelques tags p, vous pouvez utiliser flexbox. Dans presque tous les scénarios auxquels je peux penser, nous pouvons utiliser la grille. Cependant, savoir ce que flexbox peut faire pour votre projet vous aide à utiliser CSS au maximum. Vous pouvez trouver le code complet ici dans ce repository
Ilker AkbiyikTable Des Matières
Articles Similaires
