Comment puis-je remonter le "contenu" et le "bon" bloc sensible? Le problème est que je ne peux pas utiliser de grille imbriquée. Je n'ai pas besoin de hacks: pas de marge parce que l'en-tête peut avoir une hauteur différente. Pas de javascript. Seulement du CSS pur. Si tout est possible.
Maintenant, mon balisage ressemble à ceci:
.wrapper {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
"aside header header"
"left content right";
grid-gap: 15px;
}
.header, .aside, .left, .content, .right {
border: 1px solid black;
padding: 10px;
}
.header {
grid-area: header;
height: 30px; /* in real case it's responsive height */
}
.aside {
grid-area: aside;
height: 80px; /* in real case it's responsive height */
}
.left {
grid-area: left;
}
.content {
grid-area: content;
background: yellow;
}
.right {
grid-area: right;
background: yellow;
}
.left, .content, .right {
height: 100px; /* in real case it's responsive height */
}
<div class="wrapper">
<!-- this order should be on mobile -->
<header class="header">header</header>
<aside class="aside">aside</aside>
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</div>
Une solution (utilisant CSS uniquement) consiste à ajouter une autre ligne à votre grid-template-areas:
.wrapper {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
"aside header header"
"aside content right"
"left content right";
grid-gap: 15px;
}
.header, .aside, .left, .content, .right {
border: 1px solid black;
padding: 10px;
}
.header {
grid-area: header;
height:30px; /* in real case it's responsive height */
}
.aside {
grid-area: aside;
height: 80px; /* in real case it's responsive height */
}
.left {
grid-area: left;
}
.content {
grid-area: content;
background: yellow;
}
.right {
grid-area: right;
background: yellow;
}
.left, .content, .right {
height: 100px; /* in real case it's responsive height */
}
<div class="wrapper">
<!-- this order should be on mobile -->
<header class="header">header</header>
<aside class="aside">aside</aside>
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</div>
Vous pouvez utiliser ce genre de chose (margin-top) pour déplacer le contenu et le rapprocher de l'en-tête. Si cela modifie la vue sur le mobile et le rend désordonné, vous devrez créer 2 vues en fonction du périphérique et utiliser différentes valeurs CSS pour différents périphériques.
.wrapper {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
"aside header header"
"left content right";
grid-gap: 15px;
}
.header, .aside, .left, .content, .right {
border: 1px solid black;
padding: 10px;
}
.header {
grid-area: header;
height: 30px; /* in real case it's responsive height */
}
.aside {
grid-area: aside;
height: 80px; /* in real case it's responsive height */
}
.left {
grid-area: left;
}
.content {
grid-area: content;
background: yellow;
margin-top: -50px;
}
.right {
grid-area: right;
background: yellow;
margin-top: -50px;
}
.left, .content, .right {
height: 100px; /* in real case it's responsive height */
}
<div class="wrapper">
<!-- this order should be on mobile -->
<header class="header">header</header>
<aside class="aside">aside</aside>
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</div>