واگذاری مالیک دامنه
، محتوا و سورس
وب سایت
لیداوب
   در حال بارگزاری ...

آموزش استفاده از سیستم گرید در CSS

CSS
توسط سميه شفيعي
آخرین به روز رسانی پنجشنبه 14 فروردین 1399

در این قسمت از آموزش در لیداوب به آموزش سیستم گرید در  CSS خواهیم پرداخت. با ما همراه باشید.

 آموزش سیستم گرید در  CSS

فناوری CSS Grid، مجموعه‌ای جدید از فناوری است که به طراحان وب و توسعه دهندگان امکان می‌دهد تکنیک‌های قدرتمند چیدمان صفحه را در وب بگنجانند. به طور سنتی، چیدمان صفحه وب روشی بسیار چالش برانگیز بوده و است.

در گذشته، ممکن است از جداول، divها، لایه‌ها و انواع هک‌های CSS و در نهایت فریم‌ ورک‌های CSS مانند Foundation ،Bootstrap  و موارد دیگر استفاده کنیم. اما اکنون ما CSS Grid را داریم، یک ابزار طرح دو بعدی بسیار قدرتمند برای قرار دادن آیتم‌ها در صفحات وب. بیایید به چند مثال از نحوه عملکرد CSS Grid نگاهی بیندازیم.

کانتینر گرید (Grid containers)

اولین کاری که می‌خواهیم انجام دهیم، این است که یک کانتینر گرید ایجاد کنیم. ما این کار را با تنظیم خصوصیت display روی  grid ( display: grid; ) انجام می‌دهیم. کانتینر  از آیتم‌هایی به نام grid item تشکیل شده است که به آن عناصر فرزند نیز گفته می‌شود. هر فرزند مستقیم از یک کانتینر گرید تعریف شده و اکنون به طور خودکار آیتم‌های گرید هستند. کانتینر گرید در واقع شامل تعدادی آیتم است که داخل سطرها و ستون قرار می‌گیرد.

<html>



<head>

    <style>

        .grid-container {

            display: grid;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img src="1.png">

        <img src="2.png">

        <img src="3.png">

        <img src="4.png">

        <img src="5.png">

        <img src="6.png">

    </div>

</body>



</html>

توجه کنید وقتی display را روی grid تنظیم می‌کنیم ( display: grid; )، آیتم‌ها به صورت سطرهای انباشته (stacked) ظاهر می‌شوند که کل عرض کانتینر را پوشش می‌دهد.

ما در زیر چند تصویر با شماره‌ به عنوان مثال داریم. می‌توانید خطوط گرید ( inline-grid ) را مشاهده کنید.

 display: inline-grid;

<html>



<head>

    <style>

        .grid-container {

            display: inline-grid;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img src="1.png">

        <img src="2.png">

        <img src="3.png">

        <img src="4.png">

        <img src="5.png">

        <img src="6.png">

    </div>

</body>



</html>

 در مورد display تنظیم شده روی inline-grid، توجه کنید که آیتم‌های گرید فقط عرض محتوا را پوشش می‌دهند.

آموزش سیستم گرید در  CSS

گرید صریح (Explicit Grid)

پس از تنظیم کانتینر، می‌توان با استفاده از خصوصیات grid-template-rows و grid-template-columns، ستون‌ها و سطرها را به صراحت تعریف کرد. با استفاده از خصوصیت  grid-template-rows می‌توانید ارتفاع هر سطر را نیز مشخص کنید: 

grid-template-rows

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: 50px 75px;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img src="1.png">

        <img src="2.png">

        <img src="3.png">

        <img src="4.png">

        <img src="5.png">

        <img src="6.png">

    </div>

</body>



</html>

 در اینجا، سطر اول صریحاً ۵۰ پیکسل دارد و سطر دوم نیز ارتفاع ۷۵ پیکسل دارد. تمام سطرهای دیگر به سادگی از ارتفاع محتویات موجود استفاده می‌کنند. در مورد ما این تصاویر ۱۰۰ پیکسل در ۱۰۰ پیکسل است.

با استفاده از خصوصیت grid-template-columns می‌توانید تعداد ستون‌های داخل چیدمان گرید خود را مشخص کنید و همچنین می‌توانید عرض هر ستون را مشخص کنید. از خصوصیت  grid-template-columns همچنین می‌توانید برای تعیین اندازه مشخصی برای هر ستون استفاده کنید.

آموزش سیستم گرید در  CSS

grid-template-columns 

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: 100px 100px;

            grid-template-columns: 100px 100px 100px;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img src="1.png">

        <img src="2.png">

        <img src="3.png">

        <img src="4.png">

        <img src="5.png">

        <img src="6.png">

    </div>

</body>



</html>

اکنون 2 سطر و 3 ستون داریم که همه آن‌ها ارتفاع و عرض دقیق 100 پیکسل دارند.

آموزش سیستم گرید در  CSS

Fr در grid-template-row و  grid-template-columns

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: 1fr 1fr;

            grid-template-columns: 1fr 1fr 1fr;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img src="1.png">

        <img src="2.png">

        <img src="3.png">

        <img src="4.png">

        <img src="5.png">

        <img src="6.png">

    </div>

</body>



</html>

واحدهای Fractional یک روش عالی برای این است که مرورگر به طور خودکار بتواند فضای آزاد را به قسمت‌های مساوی تقسیم کند. این مثال، دو سطر از قسمت‌های مساوی و سه ستون با ابعاد مساوی را نشان می‌دهد. تصاویر فقط 100 پیکسل در 100 پیکسل هستند، بنابراین به طور پیش‌فرض از سمت چپ در هر سلول گرید شروع می‌شوند:

آموزش سیستم گرید در  CSS

حداقل و حداکثر اندازه شیار گرید (Grid Track)

شما می‌توانید از تابع minmax () برای ایجاد شیارهای گرید استفاده کنید که از فضای موجود استفاده می‌کند، اما از اندازه تعریف شده باریک‌تر نمی‌شوید یا  بیش از اندازه تعریف شده رشد نمی‌کنند.

The minmax() function

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: minmax(100px,150px) 1fr;

            grid-template-columns: 1fr 1fr 1fr;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img src="200x200.png">

        <img src="2.png">

        <img src="3.png">

        <img src="4.png">

        <img src="5.png">

        <img src="200x200.png">

    </div>

</body>



</html>

 آموزش سیستم گرید در  CSS

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows:  1fr 1fr;

            grid-template-columns: minmax(100px,auto) 1fr minmax(100px,auto);

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img src="200x200.png">

        <img src="2.png">

        <img src="3.png">

        <img src="4.png">

        <img src="5.png">

        <img src="200x200.png">

    </div>

</body>



</html>

 

چیدمان گرید (Grid Layout) به شما اجازه می‌دهد تا ترتیب قرارگیری آیتم‌ها را خودتان مشخص کنید. با استفاده از media querie‌ها شما می‌توانید، نظم و ترتیب را برای اندازه‌های خاصی از صفحه تنظیم کنید. با ترکیب minmax ()  و واحدهای fr، می‌توان انواع طراحی ریسپانسیو را ایجاد کرد که با این کار دیگر نیازی به استفاده از جست و جو چند رسانه‌ای در مرورگر نیست.

تکرار شیار‌های گرید (Grid Tracks)

به جای این که بخواهید صریحاً هر سطر یا ستون را تعریف کنید، می‌توانید از تابع   repeat() استفاده کنید تا بگویید چند سطر یا ستون را می‌خواهید.

The repeat() function

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: repeat(3, 1fr);

            grid-template-columns: repeat(3, 1fr);

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img src="1.png">

        <img src="2.png">

        <img src="3.png">

        <img src="4.png">

        <img src="5.png">

        <img src="6.png">

        <img src="7.png">

        <img src="8.png">

        <img src="9.png">

    </div>

</body>



</html>

 

آموزش سیستم گرید در  CSS

فضای خالی با شکاف گرید (Gutters With Grid Gap)

به طور پیش‌فرض هیچ فضایی بین سطرها و ستون‌ها وجود ندارد. شما می‌توانید فاصله سفید (whitespace) بین سطرها و ستون‌ها را با استفاده از شکاف گرید ( grid-gap ) تعریف کنید. توجه داشته باشید که شما نمی‌توانید هر نوع استایل را بر روی فضای خالی (gutters) اعمال کنید، این موارد فقط مخصوص فاصله سفید است.

grid-gap

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: repeat(3, 1fr);

            grid-template-columns: repeat(3, 1fr);

            grid-gap: 10px;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img src="1.png">

        <img src="2.png">

        <img src="3.png">

        <img src="4.png">

        <img src="5.png">

        <img src="6.png">

        <img src="7.png">

        <img src="8.png">

        <img src="9.png">

    </div>

</body>



</html>

آموزش سیستم گرید در  CSS

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: repeat(3, 1fr);

            grid-template-columns: repeat(3, 1fr);

            grid-row-gap: 5px;

            grid-column-gap: 20px;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img src="1.png">

        <img src="2.png">

        <img src="3.png">

        <img src="4.png">

        <img src="5.png">

        <img src="6.png">

        <img src="7.png">

        <img src="8.png">

        <img src="9.png">

    </div>

</body>



</html>

 

موقعیت یابی آیتم‌ها با استفاده از Grid Line Numbers

آنچه که CSS Grid را بسیار قدرتمند می‌کند، امکان قرار دادن محتوا دقیقا همان جایی است که شما می‌خواهید. در اینجا چند مثال از موقعیت‌ یابی تصاویر در مکان‌های دقیق روی گرید آورده شده است خصوصیت  grid-column، یک ستون را برای قرار دادن آیتم  مشخص می‌کند و خصوصیت  grid-row سطری که قرار است آیتم در آن قرار بگیرد را مشخص می‌کند. با استفاده از این خصوصیات شما تعیین می‌کنید که آیتم از کجا شروع و در کجا پایان یابد.

برای قرار دادن آیتم، شما می‌توانید شماره ستون را مشخص کنید یا اینکه چند ستون را برای قرار دادن آیتم با هم ترکیب کنید و همچنین برای قرار دادن آیتم، شما می‌توانید شماره سطر را مشخص کنید و یا اینکه چند سطر را برای قرار دادن آیتم با هم ادغام ترکیب کنید.

grid-row-start(end) grid-column-start(end)

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: repeat(2, 1fr);

            grid-template-columns: repeat(3, 1fr);

        }



        .a {

            grid-row-start: 2;

            grid-row-end: 3;

            grid-column-start: 3;

            grid-column-end: 4;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img class="a" src="1.png">

        <img class="b" src="2.png">

        <img class="c" src="3.png">

        <img class="d" src="4.png">

        <img class="e" src="5.png">

        <img class="f" src="6.png">

    </div>

</body>

 

آموزش سیستم گرید در  CSS

نحوه پوشش آیتم‌ها در سطرها و ستون ها

در این مثال‌ه،ا ما برخی از عناصر div را با مقداری رنگ آمیزی پس زمینه اضافه خواهیم کرد تا نشان دهد که چگونه می‌توان آیتم‌های گرید (grid items) را برای پوشش چندین سطر یا ستون به دلخواه شما ایجاد کرد.

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: repeat(2, 1fr);

            grid-template-columns: repeat(3, 1fr);

        }



        .a {

            grid-column-start: 1;

            grid-column-end: 4;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <div class="a"><img class="a" src="1.png"></div>

        <div class="b"><img class="b" src="2.png"></div>

        <div class="c"><img class="c" src="3.png"></div>

        <div class="d"><img class="d" src="4.png"></div>

    </div>

</body>



</html>

  

آموزش سیستم گرید در  CSS

 

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: repeat(2, 1fr);

            grid-template-columns: repeat(3, 1fr);

        }



        .a {

            grid-row-start: 1;

            grid-row-end: 3;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <div class="a"><img class="a" src="1.png"></div>

        <div class="b"><img class="b" src="2.png"></div>

        <div class="c"><img class="c" src="3.png"></div>

        <div class="d"><img class="d" src="4.png"></div>

        <div class="e"><img class="e" src="5.png"></div>

    </div>

</body>



</html>

 

آموزش سیستم گرید در  CSS

 

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: repeat(3, 1fr);

            grid-template-columns: repeat(3, 1fr);

        }



        .a {

            grid-row: 2 / 4;

            grid-column: 2 / 4;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <div class="a"><img class="a" src="1.png"></div>

        <div class="b"><img class="b" src="2.png"></div>

        <div class="c"><img class="c" src="3.png"></div>

        <div class="d"><img class="d" src="4.png"></div>

        <div class="e"><img class="e" src="5.png"></div>

        <div class="f"><img class="f" src="6.png"></div>

    </div>

</body>



</html>

 

آموزش سیستم گرید در  CSS

خطوط نامیده‌ شده گرید (Named Grid Lines)

در صورت تعریف با استفاده از   grid-template-columns  و grid-template-rows ، می‌توان نام‌ها را به خطوط گرید اختصاص داد. زمانی که خطوط گرید دارای نام است، می‌توانید هنگام تلاش برای قرار دادن یک آیتم در گرید به آن مراجعه کنید. در اینجا ما چند نام را برای خطوط سطر و ستون تنظیم می‌کنیم. زمانی که در جای درست است، ما با مراجعه به نام‌هایی که ارائه داده‌ایم و نه شماره‌های واقعی خط، یک آیتم گرید را قرار می‌دهیم.

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];

            grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];

        }



        .a {

            grid-row-start: row-2-start;

            grid-row-end: row-end;

            grid-column-start: col-1-start;

            grid-column-end: col-end;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <div class="a"><img class="a" src="1.png"></div>

        <div class="b"><img class="b" src="2.png"></div>

        <div class="c"><img class="c" src="3.png"></div>

        <div class="d"><img class="d" src="4.png"></div>

    </div>

</body>



</html>

 

آموزش سیستم گرید در  CSS

نحوه نامگذاری و موقعیت ناحیه‌های گرید (Grid Areas)

در کانتینر گرید می‌توانید از خصوصیت  grid-template-areas ،  برای نام گذاری آیتم‌های گرید (grid item) استفاده کنید. یک متد جایگزین که شما می‌توانید برای موقعیت‌یابی آیتم‌ها در گرید استفاده کنید، شامل قرار دادن آیتم‌ها با استفاده از named templateareas است. این یک روش با عملکرد بسیار جالب است و اغلب به عنوان نوعی از  متد ascii-art چیدمان گرید (ascii-art method grid layout) شناخته می‌شود. 

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-areas: "header header"

                                           "content sidebar"

                                           "footer footer";

            grid-template-rows: 150px 300px 100px;

            grid-template-columns: 1fr 200px;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </div>

</body>



</html>

 

آموزش سیستم گرید در  CSS ما می‌توانیم به راحتی چیدمان بالا را با استفاده از چند ترفند ساده معکوس کنیم:

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-areas: "header header"

                                           "sidebar content"

                                           "footer footer";

            grid-template-rows: 150px 300px 100px;

            grid-template-columns: 200px 1fr;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </div>

</body>



</html>

 

آموزش سیستم گرید در  CSS

همچنین، شما می‌توانید آیتم‌ها را با استفاده از نام‌های منطقه گرید (grid area) قرار دهید. در این مثال، اولین  div   دارای رنگ آمیزی است. به دلیل تنظیم grid-row-start ، grid-row-end ، grid-column-start و grid-column-end  برای پاورقی نامگذاری شده، این در واقع در ناحیه پاورقی صفحه قرار دارد.

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-areas: "header header"

                                           "sidebar content"

                                           "footer footer";

            grid-template-rows: 150px 300px 100px;

            grid-template-columns: 200px 1fr;

        }



        .a {

            grid-row-start:    footer;

            grid-row-end:      footer;

            grid-column-start: footer;

            grid-column-end:   footer;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <div class="a"></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </div>

</body>



</html>

 

آموزش سیستم گرید در  CSS

گرید ضمنی (Implicit Grid)

چه اتفاقی می‌افتد زمانی که فقط 3 سلول گرید را در CSS تعریف کرده‌اید، اما هنوز 9 آیتم گرید را در نشانه گذاری html دارید؟ در این سناریو، شما شروع به اجرای مفهوم Implicit Grid می‌کنید. آیتم‌های اضافی فراتر از فضای مشخص شده به صورت خودکار در Implicit Grid قرار می‌گیرند. یک Implicit Grid را می‌توان با استفاده از خصوصیات   grid-auto-rows ، grid-auto-columns و grid-auto-flow  تعریف کرد.

در مثال اول، فقط 3 سلولی که به صراحت تعریف شده است را نشان می‌دهد. ما 9 آیتم گرید داریم که باید با آن‌ها مواجه شویم. در این حالت، ما از

grid-auto-rows: 150px برای اضافه کردن سطرهای جدید با ۱۵۰ پیکسل ارتفاع برای هر آیتم درج شده خودکار استفاده می‌کنیم.

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: 100px;

            grid-template-columns: repeat(3, 1fr);

            grid-auto-rows: 150px;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img src="1.png">

        <img src="2.png">

        <img src="3.png">

        <img src="4.png">

        <img src="5.png">

        <img src="6.png">

        <img src="7.png">

        <img src="8.png">

        <img src="9.png">

    </div>

</body>



</html>

 

آموزش سیستم گرید در  CSS

سلول‌های ایجاد شده به تدریج به صورت سطرها جریان می‌یابند، اما شما می‌توانید با استفاده از grid-auto-flow: column این را به ستون‌ها تغییر دهید.

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: 100px;

            grid-template-columns: repeat(3, 1fr);

            grid-auto-flow: column;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img src="1.png">

        <img src="2.png">

        <img src="3.png">

        <img src="4.png">

        <img src="5.png">

        <img src="6.png">

        <img src="7.png">

    </div>

</body>



</html>

 

آموزش سیستم گرید در  CSS

تراز کردن آیتم‌های گرید با استفاده از justify-items

روش‌های زیادی وجود دارد که می‌توانید آیتم‌ها را در CSS Grid تراز کنید. در زیر چند مثال از  justify-items   نمایش داده شده است:

justify-items: start; 

<style>

    .grid-container {

        display: grid;

        grid-template-rows: repeat(3, 240px);

        grid-template-columns: repeat(3, 243px);

        justify-items: start;

    }

</style>

 

آموزش سیستم گرید در  CSS

justify-items: end;

<style>

    .grid-container {

        display: grid;

        grid-template-rows: repeat(3, 240px);

        grid-template-columns: repeat(3, 243px);

        justify-items: end;

    }

</style>

  

آموزش سیستم گرید در  CSS

justify-items: center;

<style>

    .grid-container {

        display: grid;

        grid-template-rows: repeat(3, 240px);

        grid-template-columns: repeat(3, 243px);

        justify-items: center;

    }

</style>

  

آموزش سیستم گرید در  CSS

justify-items: stretch;

<style>

    .grid-container {

        display: grid;

        grid-template-rows: repeat(3, 240px);

        grid-template-columns: repeat(3, 243px);

        justify-items: stretch;

    }

</style>

  

آموزش سیستم گرید در  CSS

ترازکردن آیتم‌های گرید با استفاده از align-items

تمام مثال‌های بالا برای justify-items ، در مورد align-items نیز صادق است:

align-items: start;

<style>

    .grid-container {

        display: grid;

        grid-template-rows: repeat(3, 240px);

        grid-template-columns: repeat(3, 243px);

        align-items: start;

    }

</style>

  

آموزش سیستم گرید در  CSS

align-items: end;

<style>

    .grid-container {

        display: grid;

        grid-template-rows: repeat(3, 240px);

        grid-template-columns: repeat(3, 243px);

        align-items: end;

    }

</style>

  

آموزش سیستم گرید در  CSS

align-items: center;

<style>

    .grid-container {

        display: grid;

        grid-template-rows: repeat(3, 240px);

        grid-template-columns: repeat(3, 243px);

        align-items: center;

    }

</style>

 

آموزش سیستم گرید در  CSS

align-items: stretch;

<style>

    .grid-container {

        display: grid;

        grid-template-rows: repeat(3, 240px);

        grid-template-columns: repeat(3, 243px);

        align-items: stretch;

    }

</style>

  

آموزش سیستم گرید در  CSS

در آخر، شما می‌توانید خصوصیات   justify-items و align-items را با روشی تقریباً بی حد و مرز ترکیب کنید و به شما امکان می‌دهد هر نوع تراز بندی چیدمان مورد نظر خود را ایجاد کنید. در اینج،ا ما به سادگی همه چیز را درست در مرکز روی محور x و y قرار می‌دهیم.

<style>

    .grid-container {

        display: grid;

        grid-template-rows: repeat(3, 240px);

        grid-template-columns: repeat(3, 243px);

        justify-items: center;

        align-items: center;

    }

</style>

 

آموزش سیستم گرید در  CSS

تراز کردن آیتم‌های گرید بصورت جداگانه

مثال‌های بالا به ما نشان می‌دهد چگونه می‌توان آیتم‌ها را روی گرید به طور همزمان justify و align کرد. با این وجود، شما می‌توانید هر عنصر گرید را به صورت جداگانه تراز کنید. چند نمونه از چگونگی انجام این کار را در زیر نمایش داده‌ایم: 

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: 240px;

            grid-template-columns: repeat(3, 243px);

        }



        .a {

            justify-self: start

        }



        .b {

            justify-self: center

        }



        .c {

            justify-self: end

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img class="a" src="1.png">

        <img class="b" src="2.png">

        <img class="c" src="3.png">

    </div>

</body>



</html>

 

آموزش سیستم گرید در  CSS

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: 240px;

            grid-template-columns: repeat(3, 243px);

        }



        .a {

            align-self: start

        }



        .b {

            align-self: center

        }



        .c {

            align-self: end

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img class="a" src="1.png">

        <img class="b" src="2.png">

        <img class="c" src="3.png">

    </div>

</body>



</html>

 

آموزش سیستم گرید در  CSS

 

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            grid-template-rows: 240px 240px;

            grid-template-columns: repeat(3, 243px);

        }



        .a {

            justify-self: start;

            align-self: start;

        }



        .b {

            justify-self: center;

            align-self: center;

        }



        .c {

            justify-self: end;

            align-self: start

        }



        .d {

            justify-self: start;

            align-self: end;

        }



        .e {

            justify-self: center;

            align-self: center;

        }



        .f {

            justify-self: end;

            align-self: end;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img class="a" src="1.png">

        <img class="b" src="2.png">

        <img class="c" src="3.png">

        <img class="d" src="4.png">

        <img class="e" src="5.png">

        <img class="f" src="6.png">

    </div>

</body>



</html>

 

آموزش سیستم گرید در  CSS

نحوه تراز شیارهای گرید (Grid Tracks)

برای ایجاد افکت‌های جالب شما می‌توانید همه شیار‌های گرید را با هم با توجه به کانتینر شبکه تراز کنید. ما می‌توانیم به چند مورد از این مثال‌ها در اینجا نگاهی بیندازیم. شما می‌توانید از خصوصیت  justify-content برای تراز‌بندی همه گریدها در داخل کانتینر، استفاده کنید. برای آنکه این خصوصیت تاثیر داشته باشد، باید عرض کل گرید از عرض کانتینر کمتر باشد.

justify-content: start;

گرید را با لبه ابتدایی کانتینر گرید هم تراز می‌کند. به عبارت دیگر، مقدار start، گرید را در ابتدای کانتینر قرار می‌دهد. 

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            height: 500px;

            grid-template-rows: repeat(3, 100px);

            grid-template-columns: repeat(3, 100px);

            grid-gap: 25px;

            justify-content: start;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img class="a" src="1.png">

        <img class="b" src="2.png">

        <img class="c" src="3.png">

        <img class="d" src="4.png">

        <img class="e" src="5.png">

        <img class="f" src="6.png">

        <img class="g" src="7.png">

        <img class="h" src="8.png">

        <img class="i" src="9.png">

    </div>

</body>



</html>

 

آموزش سیستم گرید در  CSS

justify-content: end;

گرید را با لبه انتهایی کانتینر گرید هم تراز می‌کند. به عبارت دیگر مقدار end، گرید را در آخر کانتینر قرار می‌دهد.

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            height: 500px;

            grid-template-rows: repeat(3, 100px);

            grid-template-columns: repeat(3, 100px);

            grid-gap: 25px;

            justify-content: end;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img class="a" src="1.png">

        <img class="b" src="2.png">

        <img class="c" src="3.png">

        <img class="d" src="4.png">

        <img class="e" src="5.png">

        <img class="f" src="6.png">

        <img class="g" src="7.png">

        <img class="h" src="8.png">

        <img class="i" src="9.png">

    </div>

</body>



</html>

 

آموزش سیستم گرید در  CSS

justify-content: center;

مقدار center، گرید را در وسط کانتینر قرار می‌دهد.

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            height: 500px;

            grid-template-rows: repeat(3, 100px);

            grid-template-columns: repeat(3, 100px);

            grid-gap: 25px;

            justify-content: center;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img class="a" src="1.png">

        <img class="b" src="2.png">

        <img class="c" src="3.png">

        <img class="d" src="4.png">

        <img class="e" src="5.png">

        <img class="f" src="6.png">

        <img class="g" src="7.png">

        <img class="h" src="8.png">

        <img class="i" src="9.png">

    </div>

</body>



</html>

  

آموزش سیستم گرید در  CSS

justify-content: space-around;

فضای یکنواخت بین هر یک از آیتم‌های گرید و فضاهای نیمه در انتها را تنظیم می‌کند. به عبارتی ساده‌تر، مقدار space-around به اطراف ستون‌ها فضای خالی اضافه می‌کند. 

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            height: 500px;

            grid-template-rows: repeat(3, 100px);

            grid-template-columns: repeat(3, 100px);

            grid-gap: 25px;

            justify-content: space-around;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img class="a" src="1.png">

        <img class="b" src="2.png">

        <img class="c" src="3.png">

        <img class="d" src="4.png">

        <img class="e" src="5.png">

        <img class="f" src="6.png">

        <img class="g" src="7.png">

        <img class="h" src="8.png">

        <img class="i" src="9.png">

    </div>

</body>



</html>

 آموزش سیستم گرید در  CSS

justify-content: space-between;

فضای یکنواخت بین هر یک از آیتم‌های گرید را تنظیم می‌کند اما در انتهای آن هیچ فضایی وجود ندارد. به عبارت دیگر، مقدار space-between بین ستون‌ها فضای خالی ایجاد می‌کند.

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            height: 500px;

            grid-template-rows: repeat(3, 100px);

            grid-template-columns: repeat(3, 100px);

            grid-gap: 25px;

            justify-content: space-between;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img class="a" src="1.png">

        <img class="b" src="2.png">

        <img class="c" src="3.png">

        <img class="d" src="4.png">

        <img class="e" src="5.png">

        <img class="f" src="6.png">

        <img class="g" src="7.png">

        <img class="h" src="8.png">

        <img class="i" src="9.png">

    </div>

</body>



</html>

 

آموزش سیستم گرید در  CSS

justify-content: space-evenly;

فضای یکنواخت بین هر یک از آیتم‌های گرید حتی در انتهای آن را تنظیم می‌کند. به بیان دیگر مقدار space-evenly  به اطراف و بین ستون‌ها به مقدار یکسان فضای خالی اضافه می‌کند.

<html>



<head>

    <style>

        .grid-container {

            display: grid;

            height: 500px;

            grid-template-rows: repeat(3, 100px);

            grid-template-columns: repeat(3, 100px);

            grid-gap: 25px;

            justify-content: space-evenly;

        }

    </style>

</head>



<body>

    <div class="grid-container">

        <img class="a" src="1.png">

        <img class="b" src="2.png">

        <img class="c" src="3.png">

        <img class="d" src="4.png">

        <img class="e" src="5.png">

        <img class="f" src="6.png">

        <img class="g" src="7.png">

        <img class="h" src="8.png">

        <img class="i" src="9.png">

    </div>

</body>



</html>

 

آموزش سیستم گرید در  CSS

نتیجه استفاده از   align-content برای شیارهای گرید را می‌توانید در مثال‌های زیر ببینید. خصوصیت  align-content  گرید را از نظر محور عمودی در وسط کانتینر قرار می‌دهد. برای اینکه کار کند باید ارتفاع کل گرید از ارتفاع کانتینر کمتر باشد.

 align-content: start;

سطرها را از ابتدا محور ستون تراز می‌کند. به عبارت دیگر مقدار start ، گرید را در ابتدای کانتینر قرار می‌دهد، start مقدار پیش‌فرض است. 

<style>

    .grid-container {

        display: grid;

        height: 500px;

        grid-template-rows: repeat(3, 100px);

        grid-template-columns: repeat(3, 100px);

        grid-gap: 25px;

        align-content: start;

    }

</style>

 آموزش سیستم گرید در  CSS

 align-content: end;

سطرها به انتهای محور ستون تراز می‌شوند. به عبارت دیگر مقدار end گرید را در آخر کانتینر قرار می‌دهد.

<style>

    .grid-container {

        display: grid;

        height: 500px;

        grid-template-rows: repeat(3, 100px);

        grid-template-columns: repeat(3, 100px);

        grid-gap: 25px;

        align-content: end;

    }

</style>

 آموزش سیستم گرید در  CSS

 align-content: center;

سطرها را به مرکز محور ستون تراز می‌کند. به عبارت دیگر مقدار center سطرها را در وسط کانتینر تراز می‌کند.

<style>

    .grid-container {

        display: grid;

        height: 500px;

        grid-template-rows: repeat(3, 100px);

        grid-template-columns: repeat(3, 100px);

        grid-gap: 25px;

        align-content: center;

    }

</style>

 آموزش سیستم گرید در  CSS

align-content: space-around;

هر فضای خالی در داخل کانتینر گرید را روی شروع و انتهای هر شیار سطر تنظیم می‌کند. به عبارت دیگر مقدار space-around در اطراف سطرها فضای خالی ایجاد می‌کند.

<style>

    .grid-container {

        display: grid;

        height: 500px;

        grid-template-rows: repeat(3, 100px);

        grid-template-columns: repeat(3, 100px);

        grid-gap: 25px;

        align-content: space-around;

    }

</style>

 آموزش سیستم گرید در  CSS

 align-content: space-between;

فضای خالی بین شیارهای سطر توزیع می‌شود. به عبارت دیگر مقدار space-between بین سطرها فضای خالی ایجاد می‌کند.

<style>

    .grid-container {

        display: grid;

        height: 500px;

        grid-template-rows: repeat(3, 100px);

        grid-template-columns: repeat(3, 100px);

        grid-gap: 25px;

        align-content: space-between;

    }

</style>

 

آموزش سیستم گرید در  CSS

 align-content: space-evenly;

فضای خالی به طور مساوی بین سطرها و در شروع و انتهای شیار توزیع می‌شود. به عبارت دیگر مقدار space-evenly  به اطراف سطرها و بین سطرها فضای خالی به طور یکسان اضافه می‌کند.

<style>

    .grid-container {

        display: grid;

        height: 500px;

        grid-template-rows: repeat(3, 100px);

        grid-template-columns: repeat(3, 100px);

        grid-gap: 25px;

        align-content: space-evenly;

    }

</style>

 آموزش سیستم گرید در  CSS

خلاصه آموزش CSS Grid

در اینجا مفاهیم به صورت مختصر در مورد CSS Grid آورده شده است.

  • CSS Grid دارای اندازه شیار ثابت و انعطاف پذیر (CSS Grid Has Fixed and flexible track sizes): طراحان وب می‌توانند گریدهایی با اندازه شیار ثابت مانند مثال استفاده از پیکسل‌ها را ایجاد کنند. این روش گرید را به پیکسل مشخص شده متناسب با چیدمان مورد نظر تعریف می‌کند. همچنین می‌توانید با استفاده از اندازه‌های انعطاف پذیر مانند درصد یا واحد جدید fr که برای این برنامه طراحی شده است، گرید ایجاد کنید.
  • قرار دادن آیتم دقیق (Precise Item placement): توسعه دهندگان می‌توانند عناصر صفحه را با استفاده از شماره‌های خط (line numbers)، نام‌ها یا با هدف قرار دادن یک منطقه از گرید در یک مکان دقیق روی CSS grid قرار دهند. CSS Grid  همچنین حاوی یک الگوریتمی است به طور ضمنی (implicitly) قرارگیری عناصری که موقعیت مشخصی در گرید داده نشده است را کنترل می‌کند.
  • ایجاد خودکار شیار برای نگه داشتن محتوا (Automatic track creation to hold content): توسعه دهندگان وب می‌توانند یک گرید صریح (explicit grid) را با چیدمان گرید (grid layout) پیکربندی کنند اما خصوصیات، این امکان را برای محتوای اضافه شده در خارج از گرید اعلام شده فراهم می‌کند. این در صورت لزوم سطرها و ستون‌های دیگری را اضافه می‌کند.
  • کنترل تراز استثنایی (Exceptional Alignment Control): همانطور که در این آموزش با مثال‌های زیادی دیدیم، هزاران روش برای تراز کردن محتوای گرید و آیتم‌های گرید وجود دارد. توسعه دهندگان می‌توانند نحوه تراز کردن آیتم‌ها را پس از قرار دادن در یک منطقه گرید (grid area) و نحوه تراز کردن کل گرید را کنترل کنند. انعطاف پذیری شدید در مورد تراز کردن وجود دارد.
  • کنترل محتوای همپوشانی (Control of overlapping content): با استفاده از CSS Grid، می‌توانید عناصر صفحه را کاملاً پیکربندی کنید یا تا به طور جزیی با هم هم پوشانی کنید تا قبل از تأثیرگذاری در صفحات وب مشاهده نشود. سپس هر لایه‌ بندی (layering) با خصوصیت z-index کنترل می‌شود. سپس هر لایه بندی با ویژگی z-index کنترل می شود.
  • CSS Grid یک فناوری چیدمان بسیار قدرتمند است: با استفاده از این ویژگی می‌توان نحوه توسعه وب برای امروز و آینده را تغییر داد. هنگامی که با دیگر ابزارهای طرح بندی قدرتمند دیگر مانند Flexbox ترکیب شدند، توسعه دهندگان می‌توانند طرح‌هایی را ایجاد کنند که قبلاً ساختن آن‌ها در CSS غیر ممکن بود.

دوره‌های آموزش طراحی سایت در لیداوب:

آموزش بوت استرپ

آموزش CSS

آموزش HTML مقدماتی

این قسمت از آموزش نیز به پایان رسید. با سایر آموزش‌های ما در لیداوب همراه باشید.

 

دیدگاه ها

دیدگاه ها : 0


متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

رایگان

اشتراک گذاری در
ثبت امتیاز
5 (1 رای)

   لطفا صبر کنید ...