JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Columns et Rows</title>
<style>
body {
font-family: cursive;
color:blue;
background-color: antiquewhite;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px auto);
}
.one {
grid-column: 1 / 1; /* Colonne */
grid-row: 1; /* Rangée */
}
.twoo {
grid-column: 2 / 3;
grid-row: 1;
}
.three {
grid-column: 3 / 3;
grid-row: 1;
}
.four {
grid-column: 1 / 1;
grid-row: 2;
}
.five {
grid-column: 2 / 3;
grid-row: 2;
}
.six {
grid-column: 3 / 3;
grid-row: 2;
}
.seven {
grid-column: 1 / 2;
grid-row: 3;
}
.one, .twoo, .three, .four, .five, .six, .seven, .eight {
font-size: 18px;
border: 1px solid blue;
border-radius: 6px;
padding: 5px;
grid-gap: 10px;
}
ul {
margin-top: 0;
}
.p1 {
color: red;
}
.image {
float: left;
margin: 0 15px 15px 0;
padding-right: 10px;
}
.image1 {
float: right;
}
.colonne-g {
display: flex;
float: left;
width: 100px;
}
.colonne-d {
display: flex;
width: 200px;
}
.centre-c {
margin-left: 10px;
margin-right: 10px;
}
.wrapper_1 {
display: flex;
gap: 10px;
}
.middle-box,.text {
padding: 10px;
}
.middle-box {
min-width: 100px;
display: flex;
flex-direction: column;
gap: 5px;
}
.image{
min-height: 100px;
}
</style>
</head>
<body>
<h1 style="text-align: center;">NOTICE CARTE MERE ASROCK Z590M</h1>
<div class="wrapper">
<div class="one">1. <strong>INTRODUCTION</strong><br>
Nous vous remercions d'avoir acheté cette carte mère ASRock Z590M Phantom Gaming 4, une carte mère fiable fabriquée conformément au contrôle de qualité, rigoureux et constant
appliqué par ASRock. Fidèle à son engagement de qualité et de durabilité, ASRock vous garantit une carte mère de...