{"id":83175,"date":"2022-07-28T10:16:46","date_gmt":"2022-07-28T08:16:46","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/diez-disenos-modernos-en-una-linea-de-css\/"},"modified":"2020-09-16T19:21:50","modified_gmt":"2020-09-16T22:21:50","slug":"diez-disenos-modernos-en-una-linea-de-css","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/dev\/diez-disenos-modernos-en-una-linea-de-css\/","title":{"rendered":"Dix mises en page modernes dans une ligne CSS"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table des mati\u00e8res<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Basculer la table des mati\u00e8res\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Basculer<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/diez-disenos-modernos-en-una-linea-de-css\/#01-Supercentrado-place-items-center\" >01. Supercentrado: lieu-items: centre<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/diez-disenos-modernos-en-una-linea-de-css\/#02-El-panqueque-deconstruido-flex\" >02. La cr\u00eape d\u00e9construite: flex:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/diez-disenos-modernos-en-una-linea-de-css\/#04-Pila-de-panqueques-grid-template-rows-auto-1fr-auto\" >04. Pile de cr\u00eapes: grid-template-rows: auto 1fr auto<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/diez-disenos-modernos-en-una-linea-de-css\/#05-Disposicion-clasica-del-Santo-Grial-grid-template-auto-1fr-auto-auto-1fr-auto\" >05. Disposition classique du Saint Graal: mod\u00e8le de grille: auto 1fr auto \/ auto 1fr auto<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/diez-disenos-modernos-en-una-linea-de-css\/#06-Cuadricula-de-12-tramos-grid-template-columns-repeat12-1fr\" >06. Grille de 12 sections: grille-mod\u00e8le-colonnes: r\u00e9p\u00e9ter (12, 1fr)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/diez-disenos-modernos-en-una-linea-de-css\/#07-RAM-Repetir-Auto-MinMax-grid-template-columnsauto-fit-minmax-1fr\" >07. RAM (Repeat, Auto, MinMax): grid-template-columns (auto-fit, minmax ( , 1fr))<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/diez-disenos-modernos-en-una-linea-de-css\/#08-Alineacion-justify-content-space-between\" >08. Alignement: justify-content: espace-entre<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/diez-disenos-modernos-en-una-linea-de-css\/#09-Sujetar-mi-estilo-clamp\" >09. Clamp my style: clamp ( , , )<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/diez-disenos-modernos-en-una-linea-de-css\/#10-Respeto-por-el-aspecto-aspect-ratio\" >10. Respect de l&#039;apparence: rapport hauteur \/ largeur: \/<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/diez-disenos-modernos-en-una-linea-de-css\/#Conclusion\" >conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Cet article met en \u00e9vidence certaines lignes puissantes de CSS qui font du gros travail et vous aident \u00e0 cr\u00e9er des mises en page modernes solides.\n        <\/p>\n<p>\n          <time>7 juillet 2020<\/time><\/p>\n<\/header>\n<p>\n  <iframe loading=\"lazy\" title=\"10 mises en page modernes en 1 ligne de CSS\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/qm0IfG1GyZU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/p>\n<p>Les mises en page CSS modernes permettent aux d\u00e9veloppeurs d&#039;\u00e9crire des r\u00e8gles de style vraiment significatives et robustes en quelques touches. L&#039;expos\u00e9 ci-dessus et cet article examinent ensuite 10 lignes de CSS puissantes qui font beaucoup de travail.<\/p>\n<p>\n  <iframe allow=\"camera; clipboard; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi; vr\" loading=\"lazy\" src=\"https:\/\/glitch.com\/embed\/#!\/embed\/1linelayouts?attributionHidden=true&amp;sidebarCollapsed=true&amp;path=README.md&amp;previewSize=100\" style=\"height: 100%; width: 100%; border: 0;\" title=\"1linelayouts sur Glitch\"><\/iframe>\n<\/p>\n<p>Pour suivre ou jouer \u00e0 ces d\u00e9mos par vous-m\u00eame, consultez l&#039;encart Glitch ci-dessus ou visitez <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/1linelayouts.glitch.me\">1linelayouts.glitch.me<\/a>.<\/p>\n<h2 id=\"01.-super-centered:-place-items:-center\"><span class=\"ez-toc-section\" id=\"01-Supercentrado-place-items-center\"><\/span>01. Supercentre: <code>lieu-items: centre<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/one-line-layouts\/01-place-items-center.mp4\"><\/source><\/video><br \/>\n<\/figure>\n<p>Pour la premi\u00e8re mise en page `` \u00e0 une seule ligne &#039;&#039;, r\u00e9solvons le plus grand myst\u00e8re de tout le domaine CSS: centrer les choses. Je veux que tu saches que c&#039;est plus facile que tu ne le penses avec <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/place-items\"><code>lieu-items: centre<\/code><\/a>.<\/p>\n<p>Pr\u00e9cisez d&#039;abord <code>la grille<\/code> comme lui <code>affichage<\/code> m\u00e9thode, puis \u00e9crivez <code>lieu-items: centre<\/code> dans le m\u00eame \u00e9l\u00e9ment. <code>objets de lieu<\/code> est une mani\u00e8re abr\u00e9g\u00e9e de d\u00e9finir les deux <code>align-items<\/code> y <code>justify-items<\/code> Tout de suite. Le mettre en <code>centre<\/code>, les deux <code>align-items<\/code> y <code>justify-items<\/code> sont configur\u00e9s pour  <code>centre<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"highlight-line\"><span class=\"token selector\">.parent<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">affichage<\/span><span class=\"token punctuation\">:<\/span> la grille<span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token property\">objets de lieu<\/span><span class=\"token punctuation\">:<\/span> centre<span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Cela permet au contenu d&#039;\u00eatre parfaitement centr\u00e9 dans le parent, quelle que soit sa taille intrins\u00e8que.<\/p>\n<h2 id=\"02.-the-deconstructed-pancake:-flex:-lessgrowgreater-lessshrinkgreater-lessbasewidthgreater\"><span class=\"ez-toc-section\" id=\"02-El-panqueque-deconstruido-flex\"><\/span>02. La cr\u00eape d\u00e9construite: <code>fl\u00e9chir:<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/one-line-layouts\/02-deconstructed-pancake-1.mp4\"><\/source><\/video><br \/>\n<\/figure>\n<p>Ensuite, nous avons la cr\u00eape d\u00e9construite! Il s&#039;agit d&#039;une mise en page courante pour les sites marketing, par exemple, qui peut comporter une rang\u00e9e de 3 \u00e9l\u00e9ments, g\u00e9n\u00e9ralement avec une image, un titre, puis du texte, d\u00e9crivant certaines caract\u00e9ristiques d&#039;un produit. Sur les appareils mobiles, nous voulons qu&#039;ils s&#039;empilent bien et se d\u00e9veloppent \u00e0 mesure que nous augmentons la taille de l&#039;\u00e9cran.<\/p>\n<p>En utilisant Flexbox pour cet effet, vous n&#039;aurez pas besoin de requ\u00eates multim\u00e9dias pour ajuster l&#039;emplacement de ces \u00e9l\u00e9ments lorsque l&#039;\u00e9cran est redimensionn\u00e9.<\/p>\n<p>Les <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/flex\"><code>fl\u00e9chir<\/code><\/a>  abr\u00e9viation signifie: <code>fl\u00e9chir:<\/code>.<\/p>\n<p>Donc, si vous voulez que vos bo\u00eetes soient remplies \u00e0 votre <code><\/code> taille, r\u00e9tr\u00e9cissez dans des tailles plus petites, mais pas <em>s&#039;\u00e9tirer<\/em> pour remplir les espaces suppl\u00e9mentaires, tapez: <code>flex: 0 1<\/code>. Dans ce cas, votre <code><\/code> c&#039;est <code>150 px<\/code> donc \u00e7a ressemble \u00e0 ceci:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"highlight-line\"><span class=\"token selector\">.parent<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">affichage<\/span><span class=\"token punctuation\">:<\/span> fl\u00e9chir<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\"><span class=\"token selector\">.child<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token property\">fl\u00e9chir<\/span><span class=\"token punctuation\">:<\/span> 0 1 150px<span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Si tu <em>Fabriquer<\/em> vous voulez que les cases s&#039;\u00e9tirent et remplissent l&#039;espace lorsqu&#039;elles passent \u00e0 la ligne suivante, d\u00e9finissez le <code><\/code> \u00e0 <code>1<\/code>, donc cela ressemblerait \u00e0 ceci:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"highlight-line\"><span class=\"token selector\">.parent<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">affichage<\/span><span class=\"token punctuation\">:<\/span> fl\u00e9chir<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\"><span class=\"token selector\">.child<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token property\">fl\u00e9chir<\/span><span class=\"token punctuation\">:<\/span> 1 1 150px<span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/one-line-layouts\/02-deconstructed-pancake-2.mp4\"><\/source><\/video><br \/>\n<\/figure>\n<p>D\u00e9sormais, \u00e0 mesure que la taille de l&#039;\u00e9cran augmente ou diminue, ces \u00e9l\u00e9ments flexibles se r\u00e9tr\u00e9cissent et se d\u00e9veloppent.<\/p>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/one-line-layouts\/03-sidebar-says.mp4\"><\/source><\/video><br \/>\n<\/figure>\n<p>Cette d\u00e9mo profite de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/minmax\">min max<\/a> fonction pour les dispositions de grille. Ce que nous faisons ici, c&#039;est de d\u00e9finir la taille minimale de la barre lat\u00e9rale sur <code>150 px<\/code>, mais sur des \u00e9crans plus grands, ce qui permet de l&#039;\u00e9tendre \u00e0 <code>25%<\/code>. La barre lat\u00e9rale occupera toujours <code>25%<\/code> de l&#039;espace horizontal de son p\u00e8re jusqu&#039;\u00e0 <code>25%<\/code> devient plus petit que <code>150 px<\/code>.<\/p>\n<p>Ajoutez-le en tant que valeur grid-template-columns avec la valeur suivante:<br \/>\n<code>minmax (150px, 25%) 1fr<\/code>. L&#039;\u00e9l\u00e9ment de la premi\u00e8re colonne (la barre lat\u00e9rale dans ce cas) obtient un <code>min max<\/code> de <code>150 px<\/code> \u00e0 <code>25%<\/code>, et le deuxi\u00e8me \u00e9l\u00e9ment (le <code>principale<\/code> section ici) occupe le reste de l&#039;espace comme un seul <code>1fr<\/code> Piste.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"highlight-line\"><span class=\"token selector\">.parent<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">affichage<\/span><span class=\"token punctuation\">:<\/span> la grille<span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token property\">grid-template-columns<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">min max<\/span><span class=\"token punctuation\">(<\/span>150 px<span class=\"token punctuation\">,<\/span> 25%<span class=\"token punctuation\">)<\/span> 1fr<span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"04.-pancake-stack:-grid-template-rows:-auto-1fr-auto\"><span class=\"ez-toc-section\" id=\"04-Pila-de-panqueques-grid-template-rows-auto-1fr-auto\"><\/span>04. Pile de cr\u00eapes: <code>grid-template-rows: auto 1fr auto<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/one-line-layouts\/04-pancake-stack.mp4\"><\/source><\/video><br \/>\n<\/figure>\n<p>Contrairement \u00e0 Deconstructed Pancake, cet exemple n&#039;enveloppe pas ses enfants lorsque la taille de l&#039;\u00e9cran change. Mieux connu sous le nom de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Layout_cookbook\/Sticky_footers\">pied de page collant<\/a>, cette mise en page est souvent utilis\u00e9e \u00e0 la fois pour les sites Web et les applications, dans les applications mobiles (le pied de page est g\u00e9n\u00e9ralement une barre d&#039;outils) et les sites Web (les applications \u00e0 page unique utilisent souvent cette mise en page globale).<\/p>\n<p>Ajouter <code>affichage: grille<\/code> le composant donnera une grille \u00e0 une seule colonne, mais la zone principale ne sera que la hauteur du contenu avec le pied de page en dessous.<\/p>\n<p>Pour que le pied de page colle \u00e0 la fin, ajoutez:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"highlight-line\"><span class=\"token selector\">.parent<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">affichage<\/span><span class=\"token punctuation\">:<\/span> la grille<span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token property\">grid-template-rows<\/span><span class=\"token punctuation\">:<\/span> auto 1fr auto<span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Cela d\u00e9finit le contenu de l&#039;en-t\u00eate et du pied de page pour prendre automatiquement la taille de leurs enfants et appliquer l&#039;espace restant (<code>1fr<\/code>) \u00e0 la zone principale, tandis que le <code>voiture<\/code> La taille de la ligne prendra la taille du contenu minimum de ses enfants, donc \u00e0 mesure que la taille du contenu augmente, la ligne elle-m\u00eame s&#039;agrandira.<\/p>\n<h2 id=\"05.-classic-holy-grail-layout:-grid-template:-auto-1fr-auto-auto-1fr-auto\"><span class=\"ez-toc-section\" id=\"05-Disposicion-clasica-del-Santo-Grial-grid-template-auto-1fr-auto-auto-1fr-auto\"><\/span>05. Arrangement classique du Saint Graal: <code>grille-mod\u00e8le: auto 1fr auto \/ auto 1fr auto<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/one-line-layouts\/05-holy-grail.mp4\"><\/source><\/video><br \/>\n<\/figure>\n<p>Pour cette mise en page classique du Saint Graal, il existe un en-t\u00eate, un pied de page, une barre lat\u00e9rale gauche, une barre lat\u00e9rale droite et un contenu principal. Il est similaire au design pr\u00e9c\u00e9dent, mais maintenant avec des barres lat\u00e9rales!<\/p>\n<p>Pour \u00e9crire toute cette grille en utilisant une seule ligne de code, utilisez le <code>grille-mod\u00e8le<\/code> propri\u00e9t\u00e9. Cela vous permet de d\u00e9finir des lignes et des colonnes en m\u00eame temps.<\/p>\n<p>La paire propri\u00e9t\u00e9 et valeur est: <code>grille-mod\u00e8le: auto 1fr auto \/ auto 1fr auto<\/code>. La barre oblique entre les premi\u00e8re et deuxi\u00e8me listes s\u00e9par\u00e9es par des espaces est le saut entre les lignes et les colonnes.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"highlight-line\"><span class=\"token selector\">.parent<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">affichage<\/span><span class=\"token punctuation\">:<\/span> la grille<span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token property\">grille-mod\u00e8le<\/span><span class=\"token punctuation\">:<\/span> auto 1fr auto \/ auto 1fr auto<span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Comme dans le dernier exemple, o\u00f9 l&#039;en-t\u00eate et le pied de page avaient un contenu auto-dimensionn\u00e9, ici les barres lat\u00e9rales gauche et droite sont automatiquement dimensionn\u00e9es en fonction de la taille intrins\u00e8que de leurs enfants. Cependant, cette fois, il est de taille horizontale (largeur) au lieu de verticale (hauteur).<\/p>\n<h2 id=\"06.-12-span-grid:-grid-template-columns:-repeat(12-1fr)\"><span class=\"ez-toc-section\" id=\"06-Cuadricula-de-12-tramos-grid-template-columns-repeat12-1fr\"><\/span>06. Grille de 12 sections: <code>grid-template-columns: r\u00e9p\u00e9ter (12, 1fr)<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/one-line-layouts\/06-12-span-1.mp4\"><\/source><\/video><br \/>\n<\/figure>\n<p>Ensuite, nous avons un autre classique: la calandre \u00e0 12 baies. Vous pouvez rapidement \u00e9crire des grilles en CSS avec le <code>r\u00e9p\u00e9ter ()<\/code> une fonction. Utilisant: <code>r\u00e9p\u00e9ter (12, 1fr);<\/code> pour les colonnes du mod\u00e8le de grille, il vous donne 12 colonnes chacune <code>1fr<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"highlight-line\"><span class=\"token selector\">.parent<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">affichage<\/span><span class=\"token punctuation\">:<\/span> la grille<span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token property\">grid-template-columns<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">r\u00e9p\u00e9ter<\/span><span class=\"token punctuation\">(<\/span>12<span class=\"token punctuation\">,<\/span> 1fr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\"><span class=\"token selector\">.child-span-12<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token property\">grid-column<\/span><span class=\"token punctuation\">:<\/span> 1 \/ 13<span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Maintenant que vous avez une grille de piste \u00e0 12 colonnes, nous pouvons placer nos enfants sur la grille. Une fa\u00e7on de faire serait de les placer en utilisant des lignes de quadrillage. Par exemple, <code>grille-colonne: 1\/13<\/code> il s&#039;\u00e9tendrait de la premi\u00e8re ligne \u00e0 la derni\u00e8re (13) et s&#039;\u00e9tendrait sur 12 colonnes. <code>grille-colonne: 1\/5;<\/code> couvrirait les quatre premiers.<\/p>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/one-line-layouts\/06-12-span-2.mp4\"><\/source><\/video><br \/>\n<\/figure>\n<p>Une autre fa\u00e7on d&#039;\u00e9crire ceci est d&#039;utiliser le <code>port\u00e9e<\/code> Mot-cl\u00e9. Avec <code>port\u00e9e<\/code>, d\u00e9finit la ligne de d\u00e9part, puis le nombre de colonnes \u00e0 couvrir \u00e0 partir de ce point de d\u00e9part. Dans ce cas, <code>grille-colonne: 1 \/ span 12<\/code> serait \u00e9quivalent \u00e0 <code>grille-colonne: 1\/13<\/code>y <code>grille-colonne: 2 \/ span 6<\/code> serait \u00e9quivalent \u00e0 <code>grille-colonne: 2\/8<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"highlight-line\"><span class=\"token selector\">.child-span-12<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token property\">grid-column<\/span><span class=\"token punctuation\">:<\/span> 1 \/ span 12<span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"07.-ram-(repeat-auto-minmax):-grid-template-columns(auto-fit-minmax(lessbasegreater-1fr))\"><span class=\"ez-toc-section\" id=\"07-RAM-Repetir-Auto-MinMax-grid-template-columnsauto-fit-minmax-1fr\"><\/span>07. RAM (R\u00e9p\u00e9ter, Auto, MinMax): <code>grid-template-columns (ajustement automatique, minmax ( , 1fr))<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/one-line-layouts\/07-ram-1.mp4\"><\/source><\/video><br \/>\n<\/figure>\n<p>Pour ce septi\u00e8me exemple, combinez certains des concepts que vous avez d\u00e9j\u00e0 appris pour cr\u00e9er une mise en page r\u00e9active avec des enfants flexibles et plac\u00e9s automatiquement. \u00c7a a l&#039;air bien. Les termes cl\u00e9s \u00e0 retenir ici sont <code>r\u00e9p\u00e9ter<\/code>, <code>auto- (ajustement | remplissage)<\/code>y <code>min max () &#039;<\/code>, rappel\u00e9 par l&#039;acronyme RAM.<\/p>\n<p>Dans l&#039;ensemble, cela ressemble \u00e0:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"highlight-line\"><span class=\"token selector\">.parent<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">affichage<\/span><span class=\"token punctuation\">:<\/span> la grille<span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token property\">grid-template-columns<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">r\u00e9p\u00e9ter<\/span><span class=\"token punctuation\">(<\/span>ajustement automatique<span class=\"token punctuation\">,<\/span> <span class=\"token function\">min max<\/span><span class=\"token punctuation\">(<\/span>150 px<span class=\"token punctuation\">,<\/span> 1fr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Vous utilisez \u00e0 nouveau la r\u00e9p\u00e9tition, mais cette fois, en utilisant le <code>ajustement automatique<\/code> mot cl\u00e9 au lieu d&#039;une valeur num\u00e9rique explicite. Cela permet le placement automatique de ces \u00e9l\u00e9ments enfants. Ces enfants ont \u00e9galement une valeur de base minimale de <code>150 px<\/code> avec une valeur maximale <code>1fr<\/code>, c&#039;est-\u00e0-dire que sur des \u00e9crans plus petits, ils occuperont tout le <code>1fr<\/code> large, et \u00e0 mesure qu&#039;ils atteignent <code>150 px<\/code> large chacun, commencera \u00e0 couler vers la m\u00eame ligne.<\/p>\n<p>Avec <code>ajustement automatique<\/code>, les bo\u00eetes s&#039;\u00e9tirent lorsque leur taille horizontale d\u00e9passe 150 pixels pour remplir tout l&#039;espace restant. Cependant, si vous changez ceci en <code>remplissage automatique<\/code>, ils ne s&#039;\u00e9tirent pas lorsque leur taille de base est d\u00e9pass\u00e9e dans la fonction minmax:<\/p>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/one-line-layouts\/07-ram-2.mp4\"><\/source><\/video><br \/>\n<\/figure>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"highlight-line\"><span class=\"token selector\">.parent<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">affichage<\/span><span class=\"token punctuation\">:<\/span> la grille<span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token property\">grid-template-columns<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">r\u00e9p\u00e9ter<\/span><span class=\"token punctuation\">(<\/span>remplissage automatique<span class=\"token punctuation\">,<\/span> <span class=\"token function\">min max<\/span><span class=\"token punctuation\">(<\/span>150 px<span class=\"token punctuation\">,<\/span> 1fr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"08.-line-up:-justify-content:-space-between\"><span class=\"ez-toc-section\" id=\"08-Alineacion-justify-content-space-between\"><\/span>08. Alignement: <code>justify-content: espace entre<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/one-line-layouts\/08-lineup.mp4\"><\/source><\/video><br \/>\n<\/figure>\n<p>Pour la conception suivante, le principal point \u00e0 d\u00e9montrer ici est <code>justify-content: espace entre<\/code>, qui place le premier et le dernier \u00e9l\u00e9ment enfant sur les bords de sa bo\u00eete englobante, l&#039;espace restant \u00e9tant uniform\u00e9ment r\u00e9parti entre les \u00e9l\u00e9ments. Pour ces cartes, elles sont plac\u00e9es dans un mode d&#039;affichage Flexbox, avec l&#039;adresse d\u00e9finie sur colonne en utilisant <code>flex-direction: colonne<\/code>.<\/p>\n<p>Cela place le titre, la description et le bloc d&#039;image dans une colonne verticale de la carte principale. Alors, en appliquant <code>justify-content: espace entre<\/code> ancre le premier (titre) et le dernier (bloc d&#039;image) \u00e9l\u00e9ments aux bords de la bo\u00eete flexible, et le texte descriptif entre eux est plac\u00e9 \u00e0 \u00e9gale distance \u00e0 chaque extr\u00e9mit\u00e9.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"highlight-line\"><span class=\"token selector\">.parent<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">affichage<\/span><span class=\"token punctuation\">:<\/span> fl\u00e9chir<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">flex-direction<\/span><span class=\"token punctuation\">:<\/span> colonne<span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> space-between<span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"09.-clamping-my-style:-clamp(lessmingreater-lessactualgreater-lessmaxgreater)\"><span class=\"ez-toc-section\" id=\"09-Sujetar-mi-estilo-clamp\"><\/span>09. Tenez mon style: <code>pince ( , , )<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/one-line-layouts\/09-clamping.mp4\"><\/source><\/video><br \/>\n<\/figure>\n<p>C&#039;est l\u00e0 que nous entrons dans certaines techniques avec <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/caniuse.com\/#feat=css-math-functions\">moins de support du navigateur<\/a>, mais ils ont des implications vraiment int\u00e9ressantes pour la conception et la mise en page de l&#039;interface utilisateur r\u00e9active. Dans cette d\u00e9mo, vous d\u00e9finissez la largeur \u00e0 l&#039;aide d&#039;une pince comme suit: <code>largeur: pince ( , , )<\/code>.<\/p>\n<p>Cela d\u00e9finit une taille minimale et maximale absolue et une taille r\u00e9elle. Avec des valeurs, cela peut ressembler \u00e0 ceci:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"highlight-line\"><span class=\"token selector\">.parent<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token property\">largeur<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">clamp<\/span><span class=\"token punctuation\">(<\/span>23 canaux<span class=\"token punctuation\">,<\/span> 50%<span class=\"token punctuation\">,<\/span> 46 canaux<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>La taille minimale ici est <code>23 canaux<\/code> ou 23 unit\u00e9s de caract\u00e8res, et la taille maximale est <code>46 canaux<\/code>, 46 caract\u00e8res. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/meyerweb.com\/eric\/thoughts\/2018\/06\/28\/what-is-the-css-ch-unit\/\">Unit\u00e9s de largeur de caract\u00e8re<\/a> sont bas\u00e9es sur la taille de la police de l&#039;\u00e9l\u00e9ment (en particulier la largeur du <code>0<\/code> glyphe). La taille \u00abr\u00e9elle\u00bb est 50%, qui repr\u00e9sente le 50% de la largeur principale de cet \u00e9l\u00e9ment.<\/p>\n<p>Quoi <code>pince ()<\/code> La fonction que vous faites ici est de permettre \u00e0 cet \u00e9l\u00e9ment de conserver une largeur 50% <em>jusqu&#039;\u00e0 ce que<\/em> 50% est sup\u00e9rieur \u00e0 <code>46 canaux<\/code> (dans des fen\u00eatres plus grandes) ou plus petit que <code>23 canaux<\/code> (dans des fen\u00eatres plus petites). Vous pouvez voir que lorsque j&#039;\u00e9tire et r\u00e9tr\u00e9cis la taille principale, la largeur de cette carte augmente jusqu&#039;\u00e0 son point de serrage maximum et diminue jusqu&#039;\u00e0 son point de serrage minimum. Il reste ensuite centr\u00e9 sur le parent car nous avons appliqu\u00e9 des propri\u00e9t\u00e9s suppl\u00e9mentaires pour le centrer. Cela permet des mises en page plus lisibles, car le texte ne sera pas trop large (ci-dessus <code>46 canaux<\/code>) ou trop \u00e9cras\u00e9 et \u00e9troit (moins de <code>23 canaux<\/code>).<\/p>\n<p>C&#039;est \u00e9galement un excellent moyen d&#039;impl\u00e9menter une typographie r\u00e9active. Par exemple, vous pouvez \u00e9crire: <code>font-size: pince (1.5rem, 20vw, 3rem)<\/code>. Dans ce cas, la taille de la police d&#039;un titre resterait toujours entre <code>1,5rem<\/code> y <code>3rem<\/code> mais il grandirait et r\u00e9tr\u00e9cirait en fonction de la <code>20vw<\/code> valeur r\u00e9elle pour s&#039;adapter \u00e0 la largeur de la fen\u00eatre.<\/p>\n<p>C&#039;est une excellente technique pour assurer la lisibilit\u00e9 avec une valeur de taille minimale et maximale, mais rappelez-vous qu&#039;elle n&#039;est pas prise en charge par tous les navigateurs modernes, alors assurez-vous d&#039;avoir des alternatives et faites vos tests.<\/p>\n<h2 id=\"10.-respect-for-aspect:-aspect-ratio:-lesswidthgreater-lessheightgreater\"><span class=\"ez-toc-section\" id=\"10-Respeto-por-el-aspecto-aspect-ratio\"><\/span>10. Respect de l&#039;apparence: <code>ratio d&#039;aspect: \/<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/one-line-layouts\/10-aspectratio.mp4\"><\/source><\/video><br \/>\n<\/figure>\n<p>Et enfin, ce dernier outil de conception est le plus exp\u00e9rimental du groupe. Il a \u00e9t\u00e9 r\u00e9cemment introduit dans Chrome Canary dans Chromium 84, et il y a un effort actif de Firefox pour l&#039;impl\u00e9menter, mais il n&#039;est actuellement dans aucune \u00e9dition de navigateur stable.<\/p>\n<p>Cependant, je tiens \u00e0 le mentionner car c&#039;est un probl\u00e8me tr\u00e8s fr\u00e9quemment rencontr\u00e9. Et cela ne fait que conserver le rapport hauteur \/ largeur d&#039;une image.<\/p>\n<p>Avec lui <code>ratio d&#039;aspect<\/code> propri\u00e9t\u00e9, lors du changement de la taille de la carte, le bloc visuel vert conserve ce rapport hauteur \/ largeur de 16 x 9. Nous respectons le rapport hauteur \/ largeur avec <code>rapport hauteur \/ largeur: 16\/9<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"highlight-line\"><span class=\"token selector\">.video<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token property\">ratio d&#039;aspect<\/span><span class=\"token punctuation\">:<\/span> 16 \/ 9<span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Pour conserver un rapport hauteur \/ largeur de 16 x 9 sans cette propri\u00e9t\u00e9, vous devez utiliser un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/aspect-ratio-boxes\/\"><code>rembourrage<\/code>  hacher<\/a> et donnez-lui une dose de <code>56.25%<\/code> pour \u00e9tablir une relation entre le haut et la largeur. Bient\u00f4t, nous aurons une propri\u00e9t\u00e9 pour cela pour \u00e9viter le piratage et la n\u00e9cessit\u00e9 de calculer le pourcentage. Vous pouvez faire un carr\u00e9 avec <code>1 \/ 1<\/code> ratio, un ratio de 2 \u00e0 1 avec <code>2 \/ 1<\/code>, et vraiment tout ce dont vous avez besoin pour redimensionner cette image avec un rapport de taille d\u00e9fini.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"highlight-line\"><span class=\"token selector\">.square<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token property\">ratio d&#039;aspect<\/span><span class=\"token punctuation\">:<\/span> 1 \/ 1<span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Bien que cette fonctionnalit\u00e9 soit toujours en plein essor, il est bon de savoir qu&#039;elle r\u00e9sout de nombreux conflits de d\u00e9veloppeurs auxquels j&#039;ai \u00e9t\u00e9 confront\u00e9 \u00e0 plusieurs reprises, en particulier en ce qui concerne les vid\u00e9os et les iframes.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>conclusion <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Merci d&#039;avoir suivi ce voyage \u00e0 travers 10 lignes puissantes de CSS. Pour plus d&#039;informations, consultez <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/youtu.be\/qm0IfG1GyZU\">la vid\u00e9o compl\u00e8te<\/a>et tester <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/1linelayouts.glitch.me\">les manifestations<\/a> vous-m\u00eame.<\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Cet article met en \u00e9vidence certaines lignes CSS puissantes qui font beaucoup de travail et vous aident \u00e0 cr\u00e9er des mises en page modernes et solides. 7 juillet 2020 Les dessins\u2026<\/p>","protected":false},"author":1,"featured_media":83177,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83175","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Diez dise\u00f1os modernos en una l\u00ednea de CSS - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Esta publicaci\u00f3n destaca algunas l\u00edneas poderosas de CSS que hacen un gran trabajo pesado y lo ayudan a crear dise\u00f1os modernos y s\u00f3lidos. 7 de julio de\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/dix-designs-modernes-en-ligne-de-css\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Diez dise\u00f1os modernos en una l\u00ednea de CSS\" \/>\n<meta property=\"og:description\" content=\"Esta publicaci\u00f3n destaca algunas l\u00edneas poderosas de CSS que hacen un gran trabajo pesado y lo ayudan a crear dise\u00f1os modernos y s\u00f3lidos. 7 de julio de\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/dev\/dix-designs-modernes-en-ligne-de-css\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-28T08:16:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5644983.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"789\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/dix-designs-modernes-en-ligne-de-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/dix-designs-modernes-en-ligne-de-css\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Diez dise\u00f1os modernos en una l\u00ednea de CSS\",\"datePublished\":\"2022-07-28T08:16:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/dix-designs-modernes-en-ligne-de-css\\\/\"},\"wordCount\":1887,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/dix-designs-modernes-en-ligne-de-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-5644983.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/dix-designs-modernes-en-ligne-de-css\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/dix-designs-modernes-en-ligne-de-css\\\/\",\"name\":\"Diez dise\u00f1os modernos en una l\u00ednea de CSS - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/dix-designs-modernes-en-ligne-de-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/dix-designs-modernes-en-ligne-de-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-5644983.png\",\"datePublished\":\"2022-07-28T08:16:46+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Esta publicaci\u00f3n destaca algunas l\u00edneas poderosas de CSS que hacen un gran trabajo pesado y lo ayudan a crear dise\u00f1os modernos y s\u00f3lidos. 7 de julio de\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/dix-designs-modernes-en-ligne-de-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/dix-designs-modernes-en-ligne-de-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-5644983.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-5644983.png\",\"width\":1200,\"height\":789,\"caption\":\"hero-5644983-4440438-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Diez dise\u00f1os modernos en una l\u00ednea de CSS - R Marketing Digital","description":"Cet article met en \u00e9vidence certaines lignes puissantes de CSS qui font du gros travail et vous aident \u00e0 cr\u00e9er des mises en page modernes solides. 7 juillet -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/fr\/dev\/dix-designs-modernes-en-ligne-de-css\/","og_locale":"fr_FR","og_type":"article","og_title":"Diez dise\u00f1os modernos en una l\u00ednea de CSS","og_description":"Esta publicaci\u00f3n destaca algunas l\u00edneas poderosas de CSS que hacen un gran trabajo pesado y lo ayudan a crear dise\u00f1os modernos y s\u00f3lidos. 7 de julio de","og_url":"https:\/\/rmarketingdigital.com\/fr\/dev\/dix-designs-modernes-en-ligne-de-css\/","og_site_name":"R Marketing Digital","article_published_time":"2022-07-28T08:16:46+00:00","og_image":[{"width":1200,"height":789,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5644983.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/dix-designs-modernes-en-ligne-de-css\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/dix-designs-modernes-en-ligne-de-css\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Diez dise\u00f1os modernos en una l\u00ednea de CSS","datePublished":"2022-07-28T08:16:46+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/dix-designs-modernes-en-ligne-de-css\/"},"wordCount":1887,"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/dix-designs-modernes-en-ligne-de-css\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5644983.png","articleSection":["Dev"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/dix-designs-modernes-en-ligne-de-css\/","url":"https:\/\/rmarketingdigital.com\/fr\/dev\/dix-designs-modernes-en-ligne-de-css\/","name":"Diez dise\u00f1os modernos en una l\u00ednea de CSS - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/dix-designs-modernes-en-ligne-de-css\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/dix-designs-modernes-en-ligne-de-css\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5644983.png","datePublished":"2022-07-28T08:16:46+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Cet article met en \u00e9vidence certaines lignes puissantes de CSS qui font du gros travail et vous aident \u00e0 cr\u00e9er des mises en page modernes solides. 7 juillet -","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/fr\/dev\/dix-designs-modernes-en-ligne-de-css\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/dix-designs-modernes-en-ligne-de-css\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5644983.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5644983.png","width":1200,"height":789,"caption":"hero-5644983-4440438-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=83175"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83175\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/83177"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=83175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=83175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=83175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}