Vous recherchez une solution pour la mise en page de la grille lors de l'utilisation dans IE11 et EdgeIE11 fix pour la mise en grille d'affichage
L'écart Je veux dire hauteur est énorme lorsque le contenu côté droit est à augmenter ce qui doit éviter.
Est-il possible d'éviter ces espaces pour IE11 & Edge?
window.location = '#one';
.my-wrap {
display: -ms-grid;
display: grid;
-ms-grid-columns: 25% fr;
grid-template-columns: 25% 1fr;
grid-gap: 0.5rem;
width: 90%;
margin: 50px auto;
color: #fff;
}
.wrap-one {
background-color: tomato;
}
.wrap-two {
background-color: blue;
}
.wrap-three {
background-color: green;
}
.button {
text-decoration: none;
background-color: #333;
color: #fff;
padding: 0.5rem 1rem;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.button:nth-of-type(1) {
-ms-grid-row: 1;
grid-row: 1;
}
.button:nth-of-type(2) {
-ms-grid-row: 2;
grid-row: 2;
}
.button:nth-of-type(3) {
-ms-grid-row: 3;
grid-row: 3;
}
.button:nth-of-type(4) {
-ms-grid-row: 4;
grid-row: 4;
}
.button:nth-of-type(5) {
-ms-grid-row: 5;
grid-row: 5;
}
.button:hover {
background-color: #000;
}
.details {
display: none;
border: 1px solid #333;
color: #333;
}
div:target {
display: block;
}
p {
margin: 10px;
}
<div class="my-wrap">
<a href="#one" class="wrap-button-one button">Link One</a>
<div id="one" class="wrap-one one details">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam repudiandae, dolor unde laudantium ducimus explicabo necessitatibus doloribus. Repellendus quasi necessitatibus omnis culpa sint dolore, error sapiente magni sequi, harum eveniet!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio est, deserunt autem laboriosam quis culpa ex animi soluta tenetur quo eius illo necessitatibus. Minima deleniti recusandae commodi? Ipsa, laudantium architecto?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ipsam, necessitatibus excepturi obcaecati quis consequatur autem, eos incidunt, accusantium esse dolorum? Reprehenderit, dicta pariatur a eligendi placeat optio praesentium architecto.</p>
</div>
<a href="#two" class="wrap-button-two button">Link Two</a>
<div id="two" class="wrap-two two details">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
</div>
<a href="#three" class="wrap-button-three button">Link Three</a>
<div id="three" class="wrap-three three details">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
</div>
<a href="#four" class="wrap-button-four button">Link Four</a>
<div id="four" class="wrap-four four details">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores debitis ducimus optio magnam ratione voluptatem voluptatum repellendus facilis. Repellat velit facilis reiciendis ratione recusandae delectus iure doloribus inventore, dolorum porro?</p>
</div>
<a href="#five" class="wrap-button-five button">Link five</a>
<div id="five" class="wrap-five five details">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit nam ab, iusto corrupti quos molestiae tempora sapiente eos unde debitis sint exercitationem aperiam hic inventore veniam, in est labore vitae! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Tempora, vel maxime! Autem ullam, quidem, ipsum obcaecati vitae alias, omnis dolores amet doloremque accusamus fugiat? Dolor iure ipsa minus nostrum sapiente.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus voluptatum harum nulla placeat, hic nesciunt consequuntur laborum officia quos eos et id veritatis quibusdam aliquam exercitationem dolores, reiciendis voluptate modi.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non voluptas explicabo dolorum at officia deserunt quaerat nam debitis incidunt est, ut pariatur modi ipsa velit laborum, dolorem doloribus dicta consequuntur!</p>
</div>
</div>
Votre structure ne le permettrait pas (je pense). Je suis sûr que vous aurez envie de grilles imbriquées –
@Paulie_D Je le pense. J'espère qu'il pourrait y avoir un développeur intelligent dans stackoverflow qui peut donner une solution hacky ;-) – Muhammed
Non ... CSS-Grid ne fonctionne pas vraiment comme ça AFAIK. Vos côtés gauche et droit devraient être dans une grille-parents séparés parce qu'ils auront des structures ** ** différentes ** ... mais lemme pense. –