Twitter
Partagez cette démonstration : Twitter

CSS switcher layout

Dernière modification : juin 2022

Démonstration d'un système de changement de mise en page responsive en pur CSS.

Switch inline layout



<input type="radio" id="grille" name="contenu_switch" checked>
<label for="grille">Affichage par grille</label>
<input type="radio" id="liste" name="contenu_switch">
<label for="liste">Affichage par liste</label>

<div class="contenu_demo">
<div class="contenu">

<div class="article">
<h3>Titre</h3>
<img src=https://unsplash.it/300/300/?random alt/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis eos blanditiis odit sit, neque excepturi, fugiat officiis magni! Ducimus deserunt culpa debitis obcaecati, cumque non a fugiat. Consectetur, itaque, praesentium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis eos blanditiis odit sit, neque excepturi, fugiat officiis magni! Ducimus deserunt culpa debitis obcaecati, cumque non a fugiat. Consectetur, itaque, praesentium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis eos blanditiis odit sit, neque excepturi, fugiat officiis magni! Ducimus deserunt culpa debitis obcaecati, cumque non a fugiat. Consectetur, itaque, praesentium.</p>
<ul>
<li><a href="">tag</a></li>
<li><a href="">tag</a></li>
<li><a href="">tag</a></li>
<li><a href="">tag</a></li>
</ul>
</div>

<div class="article">

.....

</div>

</div>
</div>




*,*::before,*::after{box-sizing: border-box;}	


ul{list-style: none;padding-left:0}	
img{max-width:100%;display:block;height:auto}
p{text-align: justify}

	
	
input[type="radio"]{

position: absolute;
left: -9999px

}
	

input[type="radio"] + label{
	
line-height: 1.2;
padding: 5px;
margin: 2rem auto 2rem 2rem;
display: inline-block;
cursor: pointer;
border: 1px solid;
color: #6753ea
	
	}
	
input[type="radio"]:checked + label{
	
background-color: #6753ea;
color: white
	
	}

	
.contenu_demo{
	
padding:1rem;
overflow:hidden;
text-align:center;
margin:auto
	
	}	
	
.contenu_demo img{
		
border-radius: .5rem;
margin:auto
	
	} 	
	
	
.article{
	
background:white;
display:inline-block;
border:1px solid hsl(0,0%,87%);
padding:10px;
margin-bottom:20px;
border-radius:.25rem
	
	}
	
.article ul li{
	
display: inline-block
	
}
	
.article li a{
	
font-size:.875rem;
display:inline-block;
background-color:#6753ea;
padding:5px;
color:white;
margin:3px
	
	} 
	
	
#grille:checked ~ .contenu_demo .article{
	
	width:48%
	
	}	
	
#liste:checked ~ .contenu_demo img{
	
	float:left;
	margin-right: 20px
	
	} 


	
/*animation lorsqu'on clique sur l'affichage liste*/
#liste:checked ~ .contenu_demo {
	
animation: anim-demo .5s cubic-bezier(.23,1,.32,1)
	
}
	
	
/*animation lorsqu'on clique sur l'affichage grille*/
#grille:checked ~ .contenu_demo .contenu {
	
animation: anim-demo .5s cubic-bezier(.23,1,.32,1)
	
	}


    
       
@media screen and (min-width:62.75em) {


.article ul li{
	
	float:left
	
	} 
	
.article li a{
	
	font-size:1rem
	
	}

.article li a:hover{
	
	transition:.6s;
	background-color:#543ee5
	
	}

#grille:checked ~ .contenu_demo ul,.contenu_demo p{
	
	text-align:justify
	
	}

#liste:checked ~ .contenu_demo h3{
	
	text-align:left


	}

#liste:checked ~ .contenu_demo ul{
	
	float:right
	
	}

#grille:checked ~ .contenu_demo .article{
	
	width:32%
	
	}

	}

/*animation*/
@keyframes anim-demo{0%{transform:translatey(100%)} 100%{transform:translatey(0%)}}
@-webkit-keyframes anim-demo{0%{-webkit-transform:translatey(100%)}100%{-webkit-transform:translatey(0%)}}	



Switch CSS Grid



<input type="radio" id="grille" name="contenu_switch" checked>
<label for="grille">Affichage par grille</label>
<input type="radio" id="liste" name="contenu_switch">
<label for="liste">Affichage par liste</label>


<div class=cadre-queries>
<div class="cq-grid">

<div class="cq-cadre-grid">

<div class="cq-image">
<img src=https://unsplash.it/200/200/?random alt>
</div>

<div class="cq-contenu-grid">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh elit, hendrerit sed mattis vel, vulputate eget lectus. Mauris malesuada nibh vel iaculis sollicitudin.</p>
<a href="#!">En savoir plus</a>
</div>

</div>

</div>
</div>




*,*::before,*::after{box-sizing: border-box;}	


ul{list-style: none;padding-left:0}	
img{max-width:100%;display:block;height:auto}
p{text-align: justify}
		
	
	
input[type="radio"]{

position: absolute;
left: -9999px

}
	
	
input[type="radio"] + label{
	
line-height: 1.2;
padding: 5px;
margin: 2rem auto 2rem 2rem;
display: inline-block;
cursor: pointer;
border:1px solid;
color: #6753ea
	
	}
	
input[type="radio"]:checked + label{
	
background-color: #6753ea;
color: white
	
	}









/*animation*/
@keyframes anim-demo{0%{transform:translatey(100%)} 100%{transform:translatey(0%)}}
@-webkit-keyframes anim-demo{0%{-webkit-transform:translatey(100%)}100%{-webkit-transform:translatey(0%)}}	
	
.cadre-queries{

max-width: 75rem;
margin: 2rem auto;
}

.cadre-queries a {

display: flex;
place-self: end;
background-color: #6753ea;
color: white;
padding: 0.5rem 1rem;
text-decoration: none;
text-transform: uppercase;
border-radius: 2ch;

}
	
.cq-grid {

display:grid;
grid-gap: 2rem;


}
	
.cq-cadre-grid { 

display:grid;
background-color: #ffffff;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 0 20px hsl(0 0% 0% / 10%);
	
}

.cq-contenu-grid{

padding: 1.5rem;
display: grid;

}	
	
	
.cq-image{aspect-ratio:var(--aspect-ratio)}
	
.cadre-queries img {

display: block;
width: 100%;
object-fit: cover;

  }	
	
#grille:checked ~ .cadre-queries .cq-grid {
	
animation: anim-demo .5s cubic-bezier(.23,1,.32,1);
grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
	
}
		



#grille:checked ~.cadre-queries .cq-grid .cq-cadre-grid .cq-image{--aspect-ratio: 3/2}	
	
#grille:checked ~ .cadre-queries .cq-grid .cq-cadre-grid .cq-image img {height:100%}	

	
#liste:checked ~ .cadre-queries	 {
	
animation: anim-demo .5s cubic-bezier(.23,1,.32,1);
	
}
		
#liste:checked ~ .cadre-queries .cq-grid {

grid-column: span 2
	
}
	
	
#liste:checked ~ .cadre-queries .cq-grid .cq-cadre-grid { 

gap: 1.5rem;
padding: 1.5rem;
align-items: center;
grid-auto-flow: column
		
	}
	
	
#liste:checked ~ .cadre-queries .cq-grid .cq-cadre-grid .cq-contenu-grid {

padding: 0
		
  }
	
#liste:checked ~ .cadre-queries .cq-grid .cq-cadre-grid .cq-image{
	
--aspect-ratio: 1/1
	
}
	
#liste:checked ~ .cadre-queries .cq-grid .cq-cadre-grid .cq-image img {
	
border-radius: .5rem;
	
  }	
	




Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.

haut page