اذهب إلى المحتوى
  • 1

استخدام الـ grid في css

Ayman Alrawy

بواسطة Ayman Alrawy

 مشاركة

السؤال

5 أجوبة على هذا السؤال

Recommended Posts

  • 1
محمد Fahmy عضو نشيط

محمد Fahmy

نشر
نشر

الكود الخاص بك جيبد ولكن ليس منظم بشكل جيد, غير أنك لا تحتاج إلى استخدام الخاصية grid-template-areas.

أنظر إلي هذا الكود وقارن بينه وبين الكود الخاص بك وسوف تتعلم الكثير.

HTML 

<!DOCTYPE html>
<html lang="en" style="font-family: Arial, Helvetica, sans-serif">
  <head>
    <meta charset="UTF-8" />
    <title>CSS</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="layout">
      <div class="grid">
        <div class="item-a">
          <p class="name">Osama Mohamed</p>
          <p class="job">Full-Stack Developer</p>
          <p class="about">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
            hendrerit arcu sed erat cursus, eu rutrum nisl rhoncus. Morbi semper
            purus in justo tempus volutpat. Pellentesque dui eros, vulputate
            eget dui eget, imperdiet mollis justo. Cras dignissim libero sed
            velit efficitur porta.
          </p>
          <p>
            Donec vulputate tellus id lacus hendrerit semper. Phasellus
            dignissim eros sed dolor elementum malesuada. Nulla malesuada tempus
            libero rutrum accumsan. Fusce consectetur enim vitae ex fermentum,
            ut maximus sem congue. Donec laoreet semper mi id accumsan. Nulla
            accumsan faucibus lorem, et ultrices risus pharetra eu. Nullam sit
            amet lorem ac libero commodo dapibus eu vel velit.
          </p>
          <span>&#8243;</span>
        </div>

        <div class="item-b">
          <p class="name">Ahemd Sayed</p>
          <p class="job">IOS Developer</p>
          <p class="about">
            Duis ullamcorper rutrum posuere. Mauris a dolor sed tortor consequat
            laoreet. Sed condimentum, erat porta sagittis blandit.
          </p>
          <p>
            Suspendisse consequat a justo quis vulputate. Quisque pharetra neque
            tempus augue consectetur pharetra. Curabitur lobortis aliquet turpis
            eget blandit. Fusce vel vulputate libero.
          </p>
          <span>&#8243;</span>
        </div>

        <div class="item-c">
          <p class="name">Shady Nabil</p>
          <p class="job">Full-Stack Developer</p>
          <p class="about">
            Vivamus consequat ultrices ante finibus dignissim. Fusce tincidunt
            suscipit tortor ac suscipit. Suspendisse vehicula accumsan libero,
            ac lobortis risus vehicula a. Nam eget orci nunc. Aliquam facilisis,
            urna vitae molestie dapibus, ante nisl efficitur quam, et efficitur
            sem elit vitae sem. Cras egestas malesuada metus sit amet
            sollicitudin.
          </p>
          <p>
            Sed ut viverra augue, vel tincidunt metus. Phasellus ac suscipit
            odio. Aliquam vehicula augue sed euismod vehicula. Curabitur luctus
            neque a enim commodo, ut posuere orci viverra. Class aptent taciti
            sociosqu ad litora torquent per conubia nostra, per inceptos
            himenaeos. Pellentesque id elementum mi. Fusce metus lectus, iaculis
            et est quis, condimentum ornare urna.
          </p>
          <span>&#8243;</span>
        </div>

        <div class="item-d">
          <p class="name">Mohamed Ibrahim</p>
          <p class="job">.Net Developer</p>
          <p class="about">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
            hendrerit arcu sed erat cursus, eu rutrum nisl rhoncus. Morbi semper
            purus in justo tempus volutpat.
          </p>
          <p>
            Pellentesque dui eros, vulputate eget dui eget, imperdiet mollis
            justo. Cras dignissim libero sed velit efficitur porta sit amet a
            urna. Sed ex sapien, finibus sed erat a, sodales tristique mauris.
            Phasellus vel finibus ligula. Nunc at magna non sem finibus accumsan
            eget eu dui. Nam ac enim quis elit dignissim dictum. In et laoreet
            diam, at dignissim mi. Ut iaculis nisi libero, tempor tincidunt
            libero rhoncus ac.
          </p>
          <span>&#8243;</span>
        </div>

        <div class="item-e">
          <p class="name">Mahmoud Mohamed</p>
          <p class="job">Full-Stack Developer</p>
          <p class="about">
            Donec vulputate tellus id lacus hendrerit semper. Phasellus
            dignissim eros sed dolor elementum malesuada. Nulla malesuada tempus
            libero rutrum accumsan. Fusce consectetur enim vitae ex fermentum,
            ut maximus sem congue.
          </p>
          <p>
            Donec laoreet semper mi id accumsan. Nulla accumsan faucibus lorem,
            et ultrices risus pharetra eu. Nullam sit amet lorem ac libero
            commodo dapibus eu vel velit. Cras in arcu orci. Ut vitae dolor non
            dolor volutpat eleifend. Maecenas lacinia, velit eu iaculis iaculis,
            sem nisi mollis ex, a imperdiet lorem dolor nec augue.
          </p>
          <span>&#8243;</span>
        </div>

        <div class="item-f">
          <p class="name">Ezz Eldin</p>
          <p class="job">Front-End Developer</p>
          <p class="about">
            Donec vulputate tellus id lacus hendrerit semper. Phasellus
            dignissim eros sed dolor elementum malesuada. Nulla malesuada tempus
            libero rutrum accumsan. Fusce consectetur enim vitae ex fermentum,
            ut maximus sem congue.
          </p>
          <p>
            Donec laoreet semper mi id accumsan. Nulla accumsan faucibus lorem,
            et ultrices risus pharetra eu. Nullam sit amet lorem ac libero
            commodo dapibus eu vel velit. Cras in arcu orci. Ut vitae dolor non
            dolor volutpat eleifend. Maecenas lacinia, velit eu iaculis iaculis,
            sem nisi mollis ex, a imperdiet lorem dolor nec augue.
          </p>
          <span>&#8243;</span>
        </div>

        <div class="item-g">
          <p class="name">Mohamed Sayed</p>
          <p class="job">IOS Developer</p>
          <p class="about">
            Ut porttitor tincidunt erat, id facilisis purus hendrerit eget. Duis
            id dolor sit amet enim dapibus ornare.
          </p>
          <p>
            Nulla ut magna a nibh congue pulvinar. Morbi id augue arcu. Integer
            eu bibendum tortor.
          </p>
          <span>&#8243;</span>
        </div>

        <div class="item-h">
          <p class="name">Ibrahim Sayed</p>
          <p class="job">IOS Developer</p>
          <p class="about">
            Vivamus consequat ultrices ante finibus dignissim. Fusce tincidunt
            suscipit tortor ac suscipit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
            hendrerit arcu.
          </p>
          <span>&#8243;</span>
        </div>

        <div class="item-i">
          <p class="name">Gamal Sayed</p>
          <p class="job">IOS Developer</p>
          <p class="about">
            Donec vulputate tellus id lacus hendrerit semper. Phasellus
            dignissim.
          </p>
          <p>
            Donec vulputate tellus id lacus hendrerit semper. Phasellus
            dignissim eros sed dolor elementum malesuada.
          </p>
          <span>&#8243;</span>
        </div>

        <div class="item-J">
          <p class="name">Eman Sayed</p>
          <p class="job">IOS Developer</p>
          <p class="about">
            Vivamus consequat ultrices ante finibus dignissim. Fusce tincidunt
            suscipit tortor ac suscipit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
            hendrerit arcu.
          </p>
          <span>&#8243;</span>
        </div>
      </div>
    </div>
  </body>
</html>

CSS 

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.layout {
  background-color: #eeeeee;
  padding: 40px;
  font-family: Arial, Helvetica, sans-serif;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: 10px;
}
.grid div {
  background-color: #ffffff;
  padding: 30px 20px;
  border-bottom: 3px solid #f54e1f;
  position: relative;
}
.grid div span {
  font-size: 60px;
  position: absolute;
  bottom: -25px;
  right: 10px;
  color: gray;
}
div p {
  line-height: 1.5;
}
.name {
  font-weight: bold;
  margin-bottom: 2px;
  font-size: 20px;
}
.job {
  color: gray;
  font-weight: bold;
  margin-bottom: 15px;
}
.about {
  font-weight: bold;
  margin-bottom: 15px;
  font-size: 18px;
}
.item-c,
.item-e,
.item-h {
  background-color: black !important;
  color: #ffffff !important;
}
.item-a {
  grid-column: 1 / span 2;
  grid-row: 1 / 2;
}
.item-e {
  grid-column: 2 / span 2;
  grid-row: 2 / 3;
}
.item-f {
  grid-column: 2 / span 2;
  grid-row: 3 / 4;
}
.item-d {
  grid-column: 1 / 2;
  grid-row: 2 / span 2;
}
.item-c {
  grid-column: 4 / 5;
  grid-row: 1 / span 3;
}

 

  • شكرًا 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 1
عمر قره محمد عضو نشيط

عمر قره محمد

نشر
نشر
بتاريخ 11 دقائق مضت قال Ayman Alrawy:

style.css 1.11 kB · 0 تنزيلات index.html 7.57 kB · 0 تنزيلات

الكود جيد جداً، واستخدام الـ grid جيد كذلك،

جرب اضافة التنسيق التالي : 

* {
  box-sizing: border-box;
}

وتعديل التنسيقات التي تعطيها للـ div كالتالي : 

div {
  width: 100%;
  height: 200vh;
  background-color: #eee;
  padding: 50px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 2fr) 1.5fr;
  grid-template-areas: "osama osama ahmed shady"
    "moh-i moh-moh moh-moh shady"
    "moh-i ezz ezz shady"
    "moh-s ibra gamal eman";
  gap: 5px;
}

لجعل ال grid على مقاس الشاشة.

سيكون من الجميل ان تقوم بعمل dynamic grid بحيث يقوم بإنشاء صفوف بشكل تلقائي وذلك إن اردت التدرب بشكل اعمق على الـ grid.

  • شكرًا 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

×
 مشاركة
اذهب إلى قائمة الأسئلة

  • إعلانات

  • تابعنا على



×
×
  • أضف...