Le code html
On établit le code html.
Démo
<head>
<style>
</style>
</head>
<body>
<main>
<article>
<h1>Ma chambre</h1>
<div>
<p>J'y dors si bien...</p>
</div>
</article>
<article>
<h1>Mon salon</h1>
<div>
<p>J'y regarde la télévision...</p>
</div>
</article>
<article>
<h1>Mon jardin</h1>
<div>
<p>J'y fais ma siste...</p>
</div>
</article>
<article>
<h1>Mon garage</h1>
<div>
<p>Qu'elle est belle ma voiture...</p>
</div>
</article>
<article>
<h1>Mes projets</h1>
<div>
<p>Pas trop mes casser le c..</p>
</div>
</article>
</main>
</body>
La grille
On ajoute la grille sur <main> et on place des backgrground sur les <article>..
Démo
<head>
<style>
.grille{
display:grid;
grid-gap:5px;
grid-template-columns:repeat(6,1fr);
grid-template-rows:repeat(4,minmax(50px,auto));
}
article:nth-child(1){
background-color:pink;
}
article:nth-child(2){
background-color:YellowGreen;
}
article:nth-child(3){
background-color:Gold;
}
article:nth-child(4){
background-color:salmon;
}
article:nth-child(5){
background-color:skyblue;
}
</style>
</head>
<body>
<main class=grille>
<article>
<h1>Ma chambre</h1>
<div>
<p>J'y dors si bien...</p>
</div>
</article>
<article>
<h1>Mon salon</h1>
<div>
<p>J'y regarde la télévision...</p>
</div>
</article>
<article>
<h1>Mon jardin</h1>
<div>
<p>J'y fais ma siste...</p>
</div>
</article>
<article>
<h1>Mon garage</h1>
<div>
<p>Qu'elle est belle ma voiture...</p>
</div>
</article>
<article>
<h1>Mes projets</h1>
<div>
<p>Pas trop mes casser le c..</p>
</div>
</article>
</main>
</body>
Une première disposition
On ajoute la grille sur <main> et on place des backgrground sur les <article>..
Démo
<head>
<style>
.grille{
display:grid;
grid-gap:5px;
grid-template-columns:repeat(6,1fr);
grid-template-rows:repeat(4,minmax(50px,auto));
}
article:nth-child(1){
grid-column:5/7;
background-color:pink;
}
article:nth-child(2){
grid-column:5/7;
background-color:YellowGreen;
}
article:nth-child(3){
grid-column:5/7;
background-color:Gold;
}
article:nth-child(4){
grid-column:5/7;
background-color:salmon;
}
article:nth-child(5){
grid-column:1/5;
grid-row:1/5;
background-color:skyblue;
}
</style>
</head>
<body>
<main class=grille>
<article>
<h1>Ma chambre</h1>
<div>
<p>J'y dors si bien...</p>
</div>
</article>
<article>
<h1>Mon salon</h1>
<div>
<p>J'y regarde la télévision...</p>
</div>
</article>
<article>
<h1>Mon jardin</h1>
<div>
<p>J'y fais ma siste...</p>
</div>
</article>
<article>
<h1>Mon garage</h1>
<div>
<p>Qu'elle est belle ma voiture...</p>
</div>
</article>
<article>
<h1>Mes projets</h1>
<div>
<p>Pas trop mes casser le c..</p>
</div>
</article>
</main>
</body>
Une deuxième disposition
On ajoute la grille sur <main> et on place des backgrground sur les <article>..
Démo
<head>
<style>
.grille{
display:grid;
grid-gap:5px;
grid-template-columns:repeat(6,1fr);
grid-template-rows:repeat(4,minmax(50px,auto));
}
article:nth-child(1){
grid-column:1/3;
grid-row:1/4;
background-color:pink;
}
article:nth-child(2){
grid-column:3/5;
grid-row:1/2;
background-color:YellowGreen;
}
article:nth-child(3){
grid-column:3/5;
grid-row:2/4;
background-color:Gold;
}
article:nth-child(4){
grid-column:5/7;
grid-row:1/4;
background-color:salmon;
}
article:nth-child(5){
grid-column:1/7;
grid-row:4/5;
background-color:skyblue;
}
</style>
</head>
<body>
<main class=grille>
<article>
<h1>Ma chambre</h1>
<div>
<p>J'y dors si bien...</p>
</div>
</article>
<article>
<h1>Mon salon</h1>
<div>
<p>J'y regarde la télévision...</p>
</div>
</article>
<article>
<h1>Mon jardin</h1>
<div>
<p>J'y fais ma siste...</p>
</div>
</article>
<article>
<h1>Mon garage</h1>
<div>
<p>Qu'elle est belle ma voiture...</p>
</div>
</article>
<article>
<h1>Mes projets</h1>
<div>
<p>Pas trop mes casser le c..</p>
</div>
</article>
</main>
</body>
