آموزش کار با Grid view در CSS

مفهوم Grid view یا نمای شبکه‌ای، یک دیدگاه کاربردی است که کمک می‌کند صفحات خود را به آسانی ریسپانسیو کنیم. در این دیدگاه ما برای یک صفحه از وب‌سایت ۱۲ ستون فرضی در نظر می‌گیریم و تمامی عناصر صفحه را با این ستون‌ها در صفحه جای می‌دهیم.

استفاده از نمای شبکه‌ای کار را راحت‌تر می‌کند و باعث می‌شود عناصر در هر جای صفحه که بخواهیم قرار بگیرند. در عرض ۱۰۰٪ صفحه ۱۲ ستون قرار می‌گیرد که هرگاه سایز نمایشگر کوچک‌تر باشد عرض هر ستون کاهش می‌یابد.

نحوه ایجاد Grid view در CSS

در ابتدا به تمامی عناصر صفحه box-sizing می‌دهیم و آن را روی border-box تنظیم می‌کنیم. این کار باعث می‌شود اندازه padding و border هر عنصر در width و Height آن محاسبه شود. در واقع این ویژگی‌ها در عرض و ارتفاع عنصر اندازه مازاد ایجاد نکنند.

* {

  box-sizing: border-box;

}

اگر بخواهیم در صفحه دو ستون ایجاد کنیم که بخش اول ۲۵٪ از عرض و بخش دوم ۷۵٪ درصد عرض داشته باشد آنگاه باید بنویسیم:

.menu {

  width: 25%;

  float: left;

}

.main {

  width: 75%;

  float: left;

}

که خروجی کد بالا به این شکل است: