چگونه یک Div را با استفاده از CSS Grid مرکز کنیم

در این مقاله، به چهار روش برای وسط افقی و عمودی یک div با استفاده از CSS Grid خواهیم پرداخت. البته این تکنیک های مرکزیت را می توان روی هر نوع عنصری استفاده کرد. ما قبلاً نحوه قرار دادن عناصر را به صورت افقی و عمودی با استفاده از پوشش داده ایم. Flexbox و موقعیت یابی با تبدیل.

مقاله مهم: 5 طراحی وب سایت غیرانتفاعی برای الهام گرفتن

راه اندازی

اجازه دهید ابتدا یک محفظه با یک عنصر جعبه ساده در داخل آن ایجاد کنیم که از آن برای نشان دادن این روش‌های مرکزی‌سازی استفاده می‌کنیم. این HTML است:

article>
  div>div>
article>/

و CSS شروع ما اینجاست:

مقاله {
  عرض: 100%;
  min-height: 100vh;
  پس‌زمینه: سیاه;
  نمایش: grid;
}

div {
  عرض: 200px;
  زمینه: زرد;
  ارتفاع: 100px;
}

در تمام مثال‌هایمان، از ویژگی display: grid استفاده خواهیم کرد. این عنصر

را به عنوان یک ظرف شبکه ایجاد می کند و یک شبکه در سطح بلوک برای آن ظرف ایجاد می کند. (اگر می‌خواهید با آن آزمایش کنید، الگوی نمایشی ما در CodePen وجود دارد.)

اکنون، بیایید به روش‌های مختلف برای مرکز بخشیدن خود نگاه کنیم.

1. با CSS Grid و place-self

یک Div را در مرکز قرار دهید

روش مورد علاقه من برای وسط یک عنصر با Grid استفاده از ویژگی place-self است. (شما می توانید اطلاعات بیشتری در مورد آن اینجا بخوانید.)

مرکز کردن div ما به همین سادگی است:

مقاله {
  نمایش: grid;
}

div {
  place-self: مرکز;
}

به قلم
مرکز کردن با استفاده از شبکه و مکان خود توسط SitePoint (@SitePoint)
در CodePen.

ویژگی place-self مخفف ویژگی های align-self (عمودی) و justify-self (افقی) است (که اگر فقط در امتداد یک محور متمرکز شوید مفید هستند). می‌توانید آنها را در این نسخه نمایشی CodePen آزمایش کنید.

استفاده از place-self آنقدر ساده است که راه حلی واضح است. اما این تنها راه برای مرکزیت یک عنصر با Grid نیست، بنابراین بیایید اکنون به چند روش دیگر نگاه کنیم.

یکی از مزیت‌های استفاده از place-self این است که روی عنصری که در مرکز قرار دارد اعمال می‌شود، به این معنی که می‌توانید از آن برای قرار دادن عناصر دیگر در همان ظرف استفاده کنید. (سعی کنید عناصر div بیشتری را به نسخه ی نمایشی CodePen اضافه کنید و ببینید چه اتفاقی می افتد.)

2. یک Div را با CSS Grid، justify-content و align-item ها را در مرکز قرار دهید

حالا به استفاده از Grid با justify-content و align-items برای مرکز بخشیدن به بخش خود نگاه می کنیم.

از ویژگی justify-content برای تراز افقی اقلام ظرف زمانی که موارد از تمام فضای موجود استفاده نمی کنند استفاده می شود. راه‌های زیادی برای تنظیم ویژگی justify-content وجود دارد، اما در اینجا فقط می‌خواهیم آن را روی center تنظیم کنیم.

درست مانند ویژگی justify-content، ویژگی align-items برای تراز کردن محتوا در یک ظرف استفاده می‌شود، اما محتوا را به‌جای افقی به صورت عمودی تراز می‌کند.

بیایید به HTML آزمایشی خود برگردیم و کد زیر را به ظرف والد اضافه کنیم:

مقاله {
  نمایش: grid;
  justify-content: center;
  align-items: center;
}

به قلم مراجعه کنید
مرکز کردن با استفاده از شبکه، تراز کردن خود و توجیه خود توسط SitePoint (@SitePoint)
در CodePen.

یک مزیت آشکار این روش این است که شامل کد کمتری می شود، زیرا مرکز توسط کانتینر مدیریت می شود. اما از برخی جهات، هدف قرار دادن div از طریق ظرف آن نیز یک نقطه ضعف است، زیرا هر عنصر دیگری در کانتینر نیز تحت تأثیر قرار خواهد گرفت.

3. یک Div را با CSS Grid و Auto Margins

مرکز کنید

مثل همیشه، ظرف والد را با display: grid هدف قرار خواهیم داد. همچنین با استفاده از margin: auto یک حاشیه خودکار به div اختصاص خواهیم داد. این باعث می‌شود که مرورگر به‌طور خودکار فضای موجود اطراف دیو کودک را محاسبه کند و آن را به‌صورت عمودی و افقی تقسیم کند و دیو را در وسط قرار دهد:

مقاله {
  نمایش: grid;
}

div {
  حاشیه: auto;
}

به قلم مراجعه کنید
یک عنصر را با شبکه CSS مرکز کنید، justify-content و align-items توسط SitePoint (@SitePoint)
در CodePen.

(به‌علاوه، کارهای جالب دیگری وجود دارد که می‌توانید انجام دهید حاشیه های CSS.)

4. یک Div را با CSS Grid و مکان آیتم ها در مرکز قرار دهید

ویژگی place-items برای تراز کردن موارد به صورت عمودی و افقی در یک شبکه استفاده می‌شود. با هدف قرار دادن ظرف به این صورت می توان از آن برای وسط div ما استفاده کرد:

مقاله {
  نمایش: grid;
  place-item: center;
}

به قلم
مراکز یک Div با شبکه CSS و حاشیه‌های خودکار توسط SitePoint مراجعه کنید (@SitePoint)
در CodePen.

مانند ویژگی place-self، place-items مخفف دو ویژگی است، در این مورد justify-items (افقی) و align-item (عمودی). می‌توانید آنها را در این نسخه نمایشی CodePen آزمایش کنید.

برخلاف place-self، place-items روی ظرف اعمال می‌شود که به آن کمی انعطاف‌پذیری کمتری می‌دهد.

نتیجه گیری

هر یک از این روش ها به شما امکان می دهد یک div را به صورت افقی و عمودی در داخل یک ظرف قرار دهید. همانطور که گفتم، ترجیح من روش place-self است، عمدتاً به این دلیل که برای عنصری که در مرکز قرار دارد به جای ظرف اعمال می شود. این برای روش margin: auto یکسان است. اما البته، اگر فقط به دنبال متمرکز کردن عنصر خود در یک جهت هستید، می‌توانید از align-self یا justify-self نیز استفاده کنید.

در نمونه‌های نمایشی، ما فقط از یک div خالی استفاده کرده‌ایم، اما مطمئناً می‌توانید محتوا را به div اضافه کنید و مرکز کردن همچنان کار می‌کند. و بار دیگر، این تکنیک‌های مرکزی‌سازی روی عناصری غیر از divs کار می‌کنند.

منبع: https://novinyaban.ir/5-طراحی-وب-سایت-غیرانتفاعی-برای-الهام-گر/