گرید بندی صفحه وب با HTML و CSS

81

0

تصویر شاخص گرید بندی صفحه وب

این پست بخشی از مسیر متخصص CSS است. اگر به این مسیر علاقه مندید اینجا کلیک کنید.

این پست بخشی از مسیر متخصص HTML است. اگر به این مسیر علاقه مندید اینجا کلیک کنید.

در این آموزش قصد داریم به ستون بندی صفحه وب بپردازیم. می خواهیم صفحه خود را به بخش های مساوی تقسیم کنیم. هچنین امکان اینکه بتوانید صفحه را به بخش های نامساوی هم تقسیم کنید وجود دارد. پس تا انتهای آموزش گرید بندی صفحه وب با 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 براتون مفید بوده باشه. هرگونه سوالی داشتید می تونید در قسمت نظرات از ما بپرسید. در اسرع وقت پاسخ سوال های شما قرار داده می شود.

مهندس محسن صادق نژاد

دبیر | مهندس نرم افزار دانشگاه شهید رجایی

2سال در کنار تاتژن

guest
0 Comments
Inline Feedbacks
View all comments