28112 sujets

CSS et mise en forme, CSS3

Bonsoir,

Pourriez-vous me dire si cette façon de faire est correcte ? Cela fonctionne mais n'est-ce pas obsolète ?
Merci par avance.
Cdt

<!doctype html>
<title>Example</title>
<style>
#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/*height: 90vh;*/
/*background-color: beige;*/
}
.red {
/*background: orangered;*/
}
.green {
/*background: yellowgreen;*/
position: relative;
left: -20vw;
top: 40vh;
border-top: 7px solid white;
border-left: 7px solid white;
}
.blue {
/*background: steelblue;*/
position: relative;
left: -40vw;
top: 5vh;
border: 7px solid white;
}
#grid > div {
/*padding: 20px;*/
font-size: 4vw;
color: white;
}
</style>

<div id="grid">
<div class="red"><img src="imgs/1.jpg"></div>
<div class="green"><img src="imgs/2.jpg"></div>
<div class="blue"><img src="imgs/3.jpg"></div>
</div>