63 – Grid – Min, Max And Auto Fill – دورات

Learn CSS In Arabic 2021

ال Code الموجود في الدرس

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS</title>
    <link rel="stylesheet" href="css/master.css" />
  </head>
  <body>
    <div class="parent">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </body>
</html>

* {
  box-sizing: border-box;
  margin: 0;
}
.parent {
  margin: 20px auto;
  height: 500px;
  background-color: #ddd;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.parent div {
  background-color: red;
  color: white;
  padding: 20px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}