گرید بندی صفحه وب با HTML و CSS
مهندس محسن صادق نژاد
این پست با مسیر متخصص CSS مرتبط است. مشاهده مسیر (Roadmap)
این پست با مسیر متخصص HTML مرتبط است. مشاهده مسیر (Roadmap)
در این آموزش قصد داریم به ستون بندی صفحه وب بپردازیم. می خواهیم صفحه خود را به بخش های مساوی تقسیم کنیم. هچنین امکان اینکه بتوانید صفحه را به بخش های نامساوی هم تقسیم کنید وجود دارد. پس تا انتهای آموزش گرید بندی صفحه وب با HTML و CSS با ما همراه باشید.
گرید بندی صفحه وب به چه معناست؟
گرید بندی یا همان شبکه بندی صفحات وب در واقع به تقسیم کردن عرض یک صفحه به ستون هایی با عرض های مختلف گفته می شود. ساده ترین راه گرید بندی استفاده از فریم ورک بوت استرپ است. بدیهی است که گاهی ما نخواهیم از فریم ورک ها استفاده کنیم، برای همین در این آموزش ما بصورت خام با HTML و CSS قصد داریم یک صفحه را به چند بخش تقسیم بندی ویا اصطلاحا گریدبندی نماییم.
ایجاد دو بخش مساوی در صفحه
برای ایجاد دو بخش مساوی، از دو div استفاده می کنیم. به آنها کلاس یکسانی می دهیم.کدهای این بخش را در کادر زیر مشاهده می کنید.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h2>تقسیم صفحه وب به دو بخش برابر</h2>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>بخش سمت چپ</h2>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>بخش سمت راست</h2>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد</p>
</div>
</div>
</body>
</html>
اکنون به فایل style.css رفته و کلاس های موجود را استایل دهی میکنیم. به چند روش می توان صفحه را گرید بندی کرد. استفاده از flex یا :after راهکار های دیگر است. ساده ترین راه ایجاد دو ستون با عرض 50 درصد است. برای در کنارهم قرار گرفتن این ستون ها نیز میتوان از float استفاده کرد. پس از وارد کردن کدهای CSS خروجی را خواهیم دید.
body{
direction: rtl;
}
* {
box-sizing: border-box;
}
h2{
text-align: center;
}
.column {
float: left;
width: 50%;
padding: 10px;
height: 1000px;
}
خروجی گریدبندی صفحه وب بصورت زیر خواهد بود:
با تغییر درصدی که برای عرض مشخص کرده ایم میتوانید عرض ستون ها را کمتر کنید. همچنین با افزایش تعداد div ها می توانید تعداد ستون ها را افزایش بدهید.
ایجاد ستون با عرض نابرابر
برای ایجاد این ستون ها کافی است که در div هایی که تشکیل می دهید کلاس های مجزایی به آنها بدهید. سپس در قسمت استایل دهی کدهای خود به کلاس های آنها عرض(width) مورد نظر خود را بدهید. فرضا به div اول کلاس left و به div دوم کلاس right را میدهیم. می خواهیم کلاس left دارای 25 درصد عرض صفحه باشد. بقیه صفحه به کلاس right می دهیم.
در قسمت استایل کافی است کدهای زیر را وارد کنیم تا گرید بندی صفحه وب ما صورت بپذیرد:
.left {
float: left;
width: 25%;
}
.right {
float: left;
width: 75%;
}
خروجی به شکل زیر خواهد بود:
شما قادر خواهید بود ستون های بیشتری را ایجاد کنید. کافی در قسمت HTML شما فرضا 4 تا div ایجاد کنید. سپس در قسمت استایل ها به هر div یک عرض مشخص بدهید. اگر بخواهید 4 ستون یکسان داشته باشد باید مقدار width را برابر 25% قرار بدهید.
از نظر شما روش های دیگری برای تقسیم بندی صفحه یا گرید بندی وجود دارد؟ در قسمت نظرات پاسخ ها و نظرات خودتون رو برای ما ارسال کنید.
امیدواریم که آموزش گرید بندی صفحه وب یا grid بندی با CSS براتون مفید بوده باشه. در آموزش های آینده درباره display و حالت های مختلف آن نظیر grid و flex صحبت خواهیم کرد. هرگونه سوالی داشتید می تونید در قسمت نظرات از ما بپرسید. به سرعت پاسخگوی سوالات شما خواهیم بود.
مهندس محسن صادق نژاد
دبیر | مهندس نرم افزار دانشگاه شهید رجایی