61 – Grid – Child – Grid Column And Grid Row

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 style="grid-row: 1 / 5">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div style="grid-row: span 2">8</div>
      <div>9</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div style="grid-column: span 3">4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </body>
</html>

/*
  Grid
  Parent
  - display: grid | inline-grid
  - grid-template-columns: [Number Of Columns In] => [Px, %, Auto, Fraction, Repeat, Mix]
  - grid-template-rows: [Number Of Rows In] => [Px, %, Auto, Fraction, Repeat, Mix]
  - gap: [Row Gap] [Column Gap]
  - justify-content
  - align-content
  - grid-template-areas
  Child
  - grid-column: [Grid-Column-Start] [Grid-Column-End]
  - grid-row: [Grid-Row-Start] [Grid-Row-End]
*/

* {
  box-sizing: border-box;
}
.parent {
  margin: 20px auto;
  width: 800px;
  height: 500px;
  background-color: #ddd;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 10px 10px;
}
.parent div {
  background-color: red;
  color: white;
  padding: 20px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}

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

روابط

التسجيل

سوشيال