آموزش Grid در CSS؛ همراه با مثال های کاربردی

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

Grid چیست؟ طراحی شبکه‌ ای رابط کاربری

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

Grid در CSS شبیه یک قفسه‌بندی هوشمند است. با استفاده از Grid، می‌توانید محتوای خود را مانند اشیای مختلف در قفسه‌ بچینید. هر قفسه یک «سلول» است و شما می‌توانید تعداد ستون‌ها، ردیف‌ها و اندازه هر سلول را به دلخواه خود تنظیم کنید.

ساختار و سینتکس Grid در CSS: گام‌به‌گام با یک مثال ساده 

درست مانند یک ساختمان که از آجر و ملات ساخته می‌شود، Grid در CSS نیز از اجزای مختلفی تشکیل شده است که با هم ترکیب می‌شوند و چارچوبی برای چیدمان محتوای شما ایجاد می‌کنند. برای درک بهتر ساختار و سینتکس، این قسمت را با یک مثال توضیح می‌دهیم.

اگر بخواهید با استفاده از Grid Layout، ردیفی از دکمه‌های رنگی با اندازه‌های یکسان بسازید، کافی‌است مراحل زیر را انجام دهید:

۱. تعریف ظرف گرید

ابتدا یک عنصر HTML به عنوان ظرف گرید تعریف کنید. در مثال زیر، ما از یک div با id container استفاده کردیم.

 

<div id="container"></div>

 

۲. تنظیم نوع نمایش به‌صورت گرید

با استفاده از CSS، نوع نمایش عنصر container را به grid تغییر دهید. این کار باعث می‌شود تا این عنصر به یک ظرف Grid در CSS تبدیل شود:

 

#container {
  display: grid;
}

 

۳. تعریف ردیف‌ و ستون

حالا باید ردیف‌ها و ستون‌های گرید را تعریف کنیم. برای این کار از ویژگی Grid در CSS استفاده می‌کنیم. این خاصیت دو بخش دارد:

• بخش اول: تعداد ردیف‌ها و ارتفاع هر ردیف را مشخص می‌کند. در مثال بالا، ما قصد داریم دو ردیف با ارتفاع ۶۰ پیکسل داشته باشیم. برای این کار از repeat(2, 60px) استفاده می‌کنیم:

 

grid: repeat(2, 60px)

 

• بخش دوم: تعداد و عرض ستون‌ها را مشخص می‌کند. در مثال بالا، تعداد ستون‌ها را نامحدود درنظر گرفتیم و قصد داریم عرض هر ستون به‌طور خودکار براساس فضای موجود تنظیم شود. برای این کار از auto-flow 80px استفاده کنید:

 

grid: repeat(2, 60px) / auto-flow 80px;

 

البته برای تعریف ردیف و ستون‌های Grid در CSS شما می‌توانید از روش دیگری هم استفاده کنید که در ادامه توضیح خواهیم داد.

۴. تعریف ظاهر آیتم‌ ها

حالا نوبت تعریف ظاهر خانه‌های رنگی داخل گرید است. برای این کار از یک سلکتور CSS برای انتخاب تمام divهای داخل ظرف گرید (#container > div) استفاده و سپس رنگ، پهنا و ارتفاع هر کدام را تنظیم کنید:

 

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

 

نتیجه به‌صورت زیر خواهد شد:

 

 

همانطور که در بالا می‌بینید، با اجرای این مراحل، دو ردیف با تعداد نامحدود ستون روی صفحه ظاهر می‌شود.

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

 قالب‌بندی المان‌ها در گرید با قابلیت grid-template بسیار راحت است. grid-template یک راه میانبر برای تعریف ردیف، ستون و نواحی خاص داخل گرید است. با این قابلیت، مرتب‌سازی و چیدمان صفحه برایتان ساده‌تر می‌شود. با grid-template می‌توانید سه ویژگی را با هم مدیریت کنید:

• grid-template-rows: برای تنظیم ارتفاع ردیف‌ها
• grid-template-columns: برای تنظیم عرض ستون‌ها
• grid-template-areas (اختیاری): برای نامگذاری ناحیه‌های خاص داخل گرید و قرار دادن آیتم‌ها در آن نواحی 

سینتکس این قابلیت Grid در CSS به‌صورت زیر است:

 

grid-template: none| grid-template-rows/ grid-template-columns | 
grid-template-areas | initial | inherit

 

برای استفاده از این قابلیت grid در css کافی‌است مقدار دلخوا‌ه‌تان برای ردیف‌ و ستون‌ را با خط جدا از هم بنویسید. اگر مقدار none برای grid-template قرار دهید، سایز ردیف و ستون‌ها به‌حالت پیش‌فرض قرار می‌گیرد. در حالت پیش‌فرض، اندازه ردیف و ستون براساس محتوای داخل آن‌ها تنظیم می‌شود. برای درک بهتر کد HTML در مثال زیر را مشاهده کنید.

مثالی از قالب‌ بندی grid در css 

در مثال زیر، برای کل گرید از کلاس main استفاده کردیم و خاصیت grid-template روی none تنظیم شده است. یعنی اندازه ردیف و ستون به‌صورت خودکار براساس محتوا چیده می‌شود. با اجرای این کد، می‌بینید هر کدام از حروف داخل یک خانه مجزا از گرید قرار می‌گیرند و اندازه خانه‌ها براساس اندازه حروف تنظیم می‌شود:

 

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        CSS | grid-template Property 
    </title> 
    <style> 
        .main { 
            display: grid; 
            grid-template: none; 
            grid-gap: 10px; 
            background-color: green; 
            padding: 10px; 
        } 
        .main > div { 
            background-color: white; 
            text-align: center; 
            padding: 15px 0; 
            font-size: 30px; 
        } 
    </style> 
</head> 
<body> 
    <div class="main"> 
        <div class="item1">G</div> 
        <div class="item2">E</div> 
        <div class="item3">E</div> 
        <div class="item4">K</div> 
    </div> 
</body> 
</html> 

 

 

نحوه تعریف ردیف‌ ها و ستون‌ ها

در قسمت قبل فهمیدیم با یک خط کد می‌توانیم تمام تنظیمات مربوط به چیدمان را انجام دهیم. پس از ایجاد یک محور با استفاده از grid-template-rows برای سطر یا grid-template-columns برای ستون‌ می‌توانید نحوه تکرار آن را به‌صورت خودکار کنید. برای ایجاد نحوه تکرار خودکار دستور در محور دیگر از ویژگی‌های ضمنی grid در css مانند موارد زیر استفاده کنید:

• grid-auto-rows: برای تکرار خودکار در سطرها
• grid-auto-columns: برای تکرار خودکار در ستون‌ها
• grid-auto-flow: جهت قرارگیری آیتم‌های گرید درصورت نداشتن تعریف خاص

برای مثال، با استفاده از auto-flow dense، آیتم‌های شبکه را به‌صورت فشرده در کنار هم قرار دادیم. شبکه به ترتیب سه ردیف با ارتفاع ۴۰ پیکسل، ۴۰ پیکسل و یک قسمت منعطف (۱ واحد fr) دارد.

 

grid: auto-flow dense / 40px 40px 1fr;

 

 

فواصل بین سلول‌ ها (Grid Gaps)

ویژگی grid-gap در CSS به شما کمک می‌کند تا به‌سادگی فاصله بین آیتم ردیف و ستون گرید را در هر دو جهت افقی و عمودی کنترل کنید. این ویژگی Grid در CSS مثل یک میانبر برای دو ویژگی دیگر است:

• grid-row-gap: فاصله بین ردیف‌های گرید را تنظیم می‌کند. (مقدار پیش فرض: ۰)
• grid-column-gap: فاصله بین ستون‌های گرید را تنظیم می‌کند. (مقدار پیش فرض: ۰)

اکنون به جای اینکه جداگانه برای فاصله ردیف و ستون مقدار تعیین کنید، با grid-gap هر دو را می‌توانید با هم مدیریت کنید. سینتکس آن به‌صورت زیر است:

 

grid-gap: grid-row-gap grid-column-gap;

 

برای استفاده از grid-gap کافی‌است مقدار موردنظر برای ایجاد فاصله را بنویسید. این مقدار را می‌توانید به‌صورت پیکسل (px)، درصد (%) یا واحدهای دیگر بنویسید. برای مثال با استفاده از دستوری مانند کد CSS زیر می‌توانید بین همه آیتم‌های گرید فاصله ۱۰ پیکسلی ایجاد کنید:

 

myGrid {
  display: grid;
  grid-gap: 10px;
}

 

همچنین می‌توانید برای تنظیم جداگانه فاصله بین ستون‌ها و ردیف‌ها، از دو خاصیت grid-column-gap و grid-row-gap به‌صورت جداگانه استفاده کنید. مثلا در کد CSS زیر بین ستون‌ها فاصله ۱۰ پیکسل و بین ردیف‌ها فاصله ۲۰ پیکسل ایجاد کردیم:

 

.myGrid {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 20px;
}

 

قرار گیری آیتم‌ ها در Grid

در چیدمان با Grid در CSS خطوطی وجود دارند که شروع، پایان یا فضای بین ستون و ردیف را مشخص می‌کنند. هر کدام از این خطوط، از ابتدای ردیف یا ستون شروع شده و به سمت راست یا پایین ادامه پیدا می‌کند و از شماره ۱ به ترتیب شماره‌گذاری می‌شود.

 

grid-row-start:    ۲;
grid-row-end:      ۳;
grid-column-start: 2;
grid-column-end:   ۳;

 

برای مثال، در یک گرید با دو ستون و سه ردیف، در مجموع ۳ خط برای ستون‌ها (شماره ۱ تا ۳) و ۴ خط برای ردیف‌ها (شماره ۱ تا ۴) خواهیم داشت.

 

 

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

اگر برای grid-row یا grid-column فقط یک مقدار مشخص کنید، آن مقدار محل شروع (start) آیتم را در ردیف یا ستون مشخص می‌کند. درصورتی‌که دو مقدار با هم، که با علامت “/” (اسلش) از هم جدا شده وارد کنید، مقدار اول محل شروع (start) و مقدار دوم محل پایان (end) آن آیتم را در ردیف یا ستون مشخص خواهد کرد.

 

grid-row:    ۲;
grid-column: 3 / 4;

 

با این کد، آیتم موردنظرتان از ردیف دوم شروع شده و تا ستون چهارم ادامه پیدا می‌کند (یعنی روی دو ستون قرار می‌گیرد).

 

 

حالا خبر خوب این است که ویژگی به‌نام grid-area به عنوان یک میانبر کار را برای تعریف موقعیت دقیق یک آیتم روی گرید برایتان ساده می‌کند. این خاصیت ترکیبی از چهار خاصیت زیر است:

• grid-row-start
• grid-column-start
• grid-row–end
• grid-column-end

وقتی از grid-area استفاده کرده و چهار مقدار برایش تعیین می‌کنید، به‌ترتیب، ردیف شروع، ستون شروع، ردیف پایان و ستون پایان را به شما نشان می‌دهد.

 

grid-area: 2 / 2 / 3 / 3;

 

 

نواحی نامگذاری شده در Grid

در چیدمان با Grid در CSS می‌توانید برای خطوط ردیف‌ و ستون به جای عدد، اسم انتخاب کنید. با نامگذاری خطوط، بعدها می‌توانید موقع قرار دادن آیتم‌ها روی گرید، به جای شماره خط، از اسم آن خط استفاده کنید. این کار کدتان را تمیزتر و خواناتر می‌کند. این کار با استفاده از ویژگی‌های grid-template-rows و grid-template-columns انجام می‌شود.

 

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];

 

توجه داشته باشید در نامگذاری خطوط، از کلماتی که در خود تعریف گرید به‌کار می‌رود (مثل span) استفاده نکنید. اسامی منتخب شما باید در آکولاد ([ ]) قرار بگیرد و نسبت به ردیف و ستون گرید تعریف شود.

 

 

تراز و چینش آیتم‌ ها در Grid

در CSS Grid Layout، شما می‌توانید ردیف و ستون Grid در CSS را نسبت به کل ناحیه گرید، به‌صورت افقی و عمودی ترازبندی کنید. برای این کار، از دو خاصیت align-content و justify-content استفاده می‌کنیم.

• align-content: این خاصیت ترازبندی ردیف‌ها را در سمت عمودی (محور ردیف‌ها) انجام می‌دهد.
• justify-content: این ویژگی ترازبندی ستون‌ها را در سمت افقی (محور ستون‌ها) انجام می‌دهد.

هرکدام از این دو ویژگی مقادیر زیر را پشتیبانی می‌کنند:

 

خاصیت	مقادیر	توضیحات
align-content	normal	ترازبندی پیش‌فرض (ردیف‌ها وسط، ستون‌ها سمت چپ)
	start	ردیف‌ها به ابتدای فضای عمودی
	end	ردیف‌ها به انتهای فضای عمودی
	center	ردیف‌ها به وسط فضای عمودی
	stretch	ردیف‌ها تمام فضای عمودی را پر می‌کنند
	space-around	بین ردیف‌ها فاصله مساوی (ردیف اول و آخر به لبه‌ها چسبیده)
	space-between	بین ردیف‌ها فاصله مساوی (ردیف اول و آخر به لبه‌ها چسبیده نیست)
	space-evenly	بین ردیف‌ها فاصله مساوی (همه ردیف‌ها به لبه‌ها چسبیده)
	baseline	ردیف‌ها بر اساس خط پایه محتوا تراز می‌شوند
	first baseline	ردیف‌ها بر اساس خط پایه اولین خط محتوا تراز می‌شوند
	last baseline	ردیف‌ها بر اساس خط پایه آخرین خط محتوا تراز می‌شوند
justify-content	normal	ترازبندی پیش‌فرض (ستون‌ها سمت چپ)
	start	ستون‌ها به ابتدای فضای افقی
	end	ستون‌ها به انتهای فضای افقی
	center	ستون‌ها به وسط فضای افقی
	stretch	ستون‌ها تمام فضای افقی را پر می‌کنند
	space-around	بین ستون‌ها فاصله مساوی (ستون اول و آخر به لبه‌ها چسبیده)
	space-between	بین ستون‌ها فاصله مساوی (ستون اول و آخر به لبه‌ها چسبیده نیست)
	space-evenly	بین ستون‌ها فاصله مساوی (همه ستون‌ها به لبه‌ها چسبیده)

 

مثال اول تراز و چینش در Grid

 

در مثال زیر، از خاصیت justify-content: start استفاده شده تا ستون‌ها در ابتدای فضای افقی قرار بگیرند.

 

.grid {
  width: 100%;
  height: 300px;
  grid-template-columns: repeat(4, 45px);
  grid-template-rows: repeat(4, 45px);
  grid-gap: 0.5em;
  justify-content: start;
}

 

 

مثال دوم تراز و چینش Grid در CSS

در مثال زیر، از justify-content: end برای قرار دادن سه آیتم انتهای ردیف استفاده شده است:

 

justify-content: end;

 

 

مثال سوم تراز و چینش در Grid

یک ردیف از ۳ کارت داریم و با استفاده از justify-content: space-evenly بین آن‌ها فاصله ایجاد می‌کنیم:

 

justify-content: space-between;

 

 

آیتم‌ های Grid تو در تو (Nested Grids)

تا اینجا بررسی کردیم چطور می‌توانیم با Grid Layout یک چیدمان ردیف و ستونی زیبا و منظم برای المان‌های صفحه ایجاد کنیم. اما قدرت grid در css به همین جا ختم نمی‌شود. قابلیت فوق العاده‌ای به اسم «گرید تو در تو» وجود دارد که امکان چیدمان‌های چند سطحی به شما می‌دهد.

تصور کنید ردیفی از کارت‌ها دارید که هر کارت حاوی چند آیتم دیگر است. Grid Layout به شما امکان می‌دهد هر کدام از کارت‌ها را به یک گرید دیگر تبدیل کنید و داخل آن‌ها یک چیدمان ردیف و ستونی دیگر داشته باشید.

با این قابلیت می‌توانید روابط کاربری پیچیده را به‌سادگی و نظم بیشتر طراحی کنید. 

 

 

در مثال زیر، یک بخش اصلی با کلاس wrapper مشخص کردیم که به‌صورت یک گرید با سه ستون تعریف شده است. داخل این بخش، یک جعبه با کلاس box1 قرار گرفته که به‌صورت یک گرید دو ستونه تعریف کردیم.

 

* {
  box-sizing: border-box;
}
.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  gap: 3px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.box {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
.box1 {
  grid-column: 1 / 4;
}
.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}

 

با اینکه هر دو بخش wrapper و box1 از Grid Layout استفاده می‌کنند، اما این دو گرید از هم جدا هستند و هیچ ارتباطی باهم ندارند.

مشکل اینجاست فاصله (gap) که برای گرید اصلی (wrapper) تعریف شده، به گرید داخلی (box1) اعمال نمی‌شود؛ درنتیجه خطوط ستون و ردیف های گرید داخلی، با خطوط گرید اصلی همخوانی ندارند.

 

 

راهکار این مشکل چیست؟

برای اینکه بتوانید از فاصله و خطوط گرید اصلی در بخش‌های تودرتو استفاده کنید، باید از قابلیت زیرگرید (Subgrid) در CSS Grid Layout استفاده کنید. این قابلیت در نسخه‌های جدیدتر grid در css دردسترس بوده و به شما امکان می‌دهد تا گریدهای فرزند (مثل box1) را به‌طور مستقیم با گرید والد (مثل wrapper) هماهنگ کنید.

در مثال قبل، کافی‌است برای تمام باکس‌ها از box-sizing: border-box; استفاده کنیم تا اندازه مرزها هم جزئی از عرض و ارتفاع آن‌ها در نظر گرفته شود.

 

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  display: grid;
  grid-template-columns: subgrid;
}

 

واحد های انعطاف‌ پذیر و Auto in Grid

تا این قسمت از مقاله فهمیدیم چطور با grid در css یک صفحه‌بندی زیبا با ردیف و ستون مشخص تعریف کنیم. حالا می‌خواهیم یک آیتم جدید اضافه کنیم، اما فضایی برای این آیتم در ردیف و ستون‌های از پیش تعیین شده وجود ندارد. در این حالت، چه کار باید کرد؟

به لطف قابلیت فوق‌العاده کاربردی گرید به‌نام Implicit Grid یا همان چیدمان خودکار (Auto in Grid) مشکل حل خواهد شد. Implicit Grid یک ردیف (یا ستون) اضافی است که به‌صورت خودکار توسط مرورگر ایجاد می‌شود تا المان‌هایی را که در گرید اصلی جا نمی‌شوند، به‌سادگی سرجایشان قرار دهد. با این ویژگی بدون دردسر و نیاز به تعریف ردیف یا ستون‌های اضافی، می‌توانید به چیدمان دلخواه‌تان برسید.

Implicit Grid با سه ویژگی قدرتمند کنترل می‌شود:

• grid-auto-rows: ارتفاع ردیف‌های گرید پنهان را تعیین می‌کند.
• grid-auto-columns: عرض ستون‌های گرید پنهان را مشخص می‌کند.
• grid-auto-flow: نحوه قرارگیری المان‌ها در گرید پنهان را کنترل می‌کند.

مثال اول از Implicit Grid

با مثال زیر، به‌راحتی این قسمت را متوجه خواهید شد:

 

grid-template-rows:    70px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows:        140px

 

در کد CSS بالا، فقط یک ردیف با ارتفاع ۷۰ پیکسل تعریف کردیم (grid-template-rows). با‌این‌حال، آیتم‌های ۳ و ۴ هم باید جایی در صفحه داشته باشند. اینجاست که ویژگی Implicit Grid مقتدرانه وارد می‌شود. مرورگر به‌طور خودکار یک ردیف جدید در Implicit Grid با ارتفاع ۱۴۰ پیکسل ایجاد می‌کند تا بتواند به‌راحتی آیتم‌های ۳ و ۴ را در صفحه جای دهد.

 

 

مثال دوم از Implicit Grid

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

 

grid-auto-flow: row

 

 

مثال سوم Implicit Grid

اگر بخواهید همین عکس‌ها را به‌صورت ستونی روی هم نمایش دهید، کافی‌است از کد زیر استفاده کنید:

 

grid-auto-flow: column

 

 

مثال آخر از Implicit Grid

اکنون فرض کنید می‌خواهید داخل Grid در CSS دو ستون با اندازه‌های مشخص داشته باشید و باقی آیتم‌ها به‌صورت خودکار داخل ستون‌های دیگر قرار گیرد. در این مثال، اندازه دو ستون اول را با grid-template-columns تعریف کرده و برای بقیه ستون‌ها از grid-auto-columns استفاده کنید:

 

grid-template-columns: 30px 60px;
grid-auto-flow:        column;
grid-auto-columns:     1fr;

 

در این کد CSS، اندازه ستون اول ۳۰ پیکسل و ستون دوم ۶۰ پیکسل تعریف شده است.

برای ستون‌های بعدی، از grid-auto-columns: 1fr به‌کار بردیم. واحد fr واحد انعطاف‌پذیری است که باعث می‌شود سایر ستون‌ها به‌صورت مساوی، فضای باقی‌مونده را پر کنند.

 

 

نکات استفاده بهینه از Grid

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

• استفاده از نام به جای شماره برای ستون‌ ها

به جای اینکه برای ستون‌های گرید از شماره استفاده کنید، بهتر است اسم انتخاب کنید. با این کار کد شما خوانایی و نگهداری بهتری خواهد داشت. (در بالاتر برایتان گفتیم چگونه نام‌گذاری انجام دهید.)

• استفاده از واحد fr برای انعطاف‌پذیری

برای تعریف اندازه ستون‌های Grid در CSS، به جای پیکسل (px) یا درصد (%) از واحد fr استفاده کنید. واحد fr واحد منعطفی بوده و باعث می‌شود ستون‌ها به‌صورت خودکار با فضای موجود در گرید، تنظیم شوند.

• خداحافظی با سیستم‌های گرید قدیمی

با استفاده از Grid در CSS دیگر نیازی به استفاده از سیستم‌های گرید قدیمی ندارید. Grid Layout به‌تنهایی تمام نیازهای شما را برای چیدمان برآورده می‌کند.

برای درک بهتر، به مثال زیر توجه کنید:

 

.container {
  display: grid;
  grid-template-columns: [sidebar] 3fr [content] 4fr;
}

 

در این کد، برای ستون‌ها از نام‌های sidebar و content استفاده کردیم. حالا وقتی بخواهیم موقعیت یک آیتم را داخل grid در css مشخص کنیم، از اسامی آن‌ها می‌توانیم استفاده کنیم، به‌این‌صورت:

 

.content {
  grid-column: content;
}

 

کلام پایانی؛ فوت‌ کوزه‌ گری استفاده از Grid در CSS

Grid در CSS با ارائه ابزارهای قدرتمند و انعطاف‌پذیر، به شما امکان می‌دهد طرح‌های وب خود را به‌طور دقیق و با ظرافت تمام پیاده‌سازی کنید. در این مقاله، سفری به دنیای CSS Grid داشتیم و با مفاهیم کلیدی و کاربردهای آن آشنا شدیم.

در این مقاله با ویژگی‌های گرید در CSS آشنا شدیم. ویژگی‌هایی که باعث می‌شود:

• با روش‌های سنتی خداحافظی کنید: با Grid، دیگر نیازی به استفاده از روش‌های پیچیده و طاقت‌فرسای مانند Float، Flexbox و Tables برای چیدمان صفحات وب خود ندارید.
• طراحی‌های دوبعدی بسازید: Grid به شما امکان می‌دهد تا به‌سادگی صفحات وب خود را در دو بعد (افقی و عمودی) طراحی کنید و عناصر را بادقت و ظرافت در جایگاه مناسب خود قرار دهید.
• ردیف‌ها و ستون‌ها را با ساختاری منظم بچینید: Grid بر پایه ردیف‌ها و ستون‌هایی بنا شده است که به شما امکان می‌دهد تا ساختاری منظم و قابل‌کنترل برای چیدمان محتوای خود ایجاد کنید.
• ناحیه‌های گرید را ایجاد کنید: با ترکیب ردیف‌ها و ستون‌ها، می‌توانید ناحیه‌های گرید ایجاد کنید و هر عنصر را در یکی از این ناحیه‌ها قرار دهید.
• تنظیم اندازه‌ها: grid در CSS به شما امکان می‌دهد تا به‌طور دقیق اندازه ردیف‌ها، ستون‌ها و ناحیه‌های گرید را مطابق با نیاز خود تنظیم کنید.
• قرارگیری عناصر: با استفاده از خواص مختلف Grid، می‌توانید عناصر را در هر نقطه از ناحیه گرید که می‌خواهید قرار دهید.
• ترتیب‌دهی محتوا: Grid در CSS به شما امکان می‌دهد تا ترتیب نمایش عناصر در صفحه را به‌طور دلخواه و با ظرافت کامل کنترل کنید.
• قابلیت انعطاف‌پذیری: Grid به‌طرز شگفت‌انگیزی انعطاف‌پذیر است و به شما امکان می‌دهد تا چیدمان صفحات خود را به گونه‌ای طراحی کنید که در دستگاه‌های مختلف با اندازه‌های متفاوت به‌درستی نمایش داده شود.
• طراحی‌های ریسپانسیو دارد: با Grid، می‌توانید به‌سادگی صفحات وب ریسپانسیو و سازگار با هر نوع دستگاهی طراحی کنید.
• خلاقیت خود را افزایش دهید: Grid در CSS دنیایی از خلاقیت را در طراحی صفحات وب به روی شما می‌گشاید و به شما امکان می‌دهد تا طرح‌های زیبا و چشم‌نواز خلق کنید.

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