site-logo site-logo
CSS - تراز موارد (Justify Items)
نوشتن نظر کلیک کنید

CSS – تراز موارد (Justify Items)

آخرین بروزرسانی: 

ویژگی CSS justify-items یک ترتیب پیش‌فرض برای تراز بندی عناصر در محور مربوطه برای هر جعبه ارائه می‌دهد با تنظیم تراز پیش‌فرض برای همه آیتم‌های جعبه.

اثر این ویژگی بستگی به حالت طراحی موجود دارد:

  1. در طراحی‌های سطح بلوکی، آیتم‌ها را در امتداد محور درون خطی داخل بلوک مربوطه تراز می‌کند.

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

  3. این ویژگی در طراحی‌های سلول جدول چگالی نادیده گرفته می‌شود.

  4. این ویژگی در طراحی‌های فلکس باکس نادیده گرفته می‌شود.

  5. آیتم‌ها را در داخل مناطق شبکه در امتداد محور درون خطی در طراحی‌های شبکه تراز می‌کند.

مقادیر ممکن برای ویژگی justify-items به شرح زیر است:

  1. normal: تأثیر این کلمه کلیدی به حالت طراحی بستگی دارد:

    • در طراحی‌های سطح بلوکی، همانند start عمل می‌کند.
    • برای موقعیت‌دهی مطلق، این کلمه کلیدی به عنوان “start” برای جعبه‌های جایگزین و به عنوان “stretch” برای سایر جعبه‌های مطلق استفاده می‌شود.
    • در طراحی‌های سلول جدول، این ویژگی معنی ندارد.
    • در طراحی‌های فلکس باکس، این ویژگی نادیده گرفته می‌شود.
    • این مورد به عنوان “stretch” برای آیتم‌های شبکه عمل می‌کند، به جز جعبه‌هایی که نسبت به هم تناسب دارند یا ابعاد درونی دارند که به عنوان “start” عمل می‌کنند.

  2. start: آیتم‌ها را در لبه شروعی ظرف تراز در محور متناظر قرار می‌دهد.

  3. end: آیتم‌ها را در لبه پایانی ظرف تراز در محور متناظر قرار می‌دهد.

  4. center: آیتم‌ها را در مرکز ظرف تراز قرار می‌دهد.

  5. flex-start: این مقدار به عنوان شروع توسط آیتم‌هایی که فرزندان یک مخزن فلکس نیستند، در نظر گرفته می‌شود.

  6. flex-end: این مقدار به عنوان پایان توسط آیتم‌هایی که فرزندان یک مخزن فلکس نیستند، در نظر گرفته می‌شود.

  7. self-start: آیتم‌ها را در لبه شروعی ظرف تراز متناظر محور محل تراز قرار می‌دهد.

  8. self-end: آیتم‌ها را در لبه پایانی ظرف تراز متناظر محور محل تراز قرار می‌دهد.

  9. left: آیتم‌ها را در لبه چپ ظرف تراز قرار می‌دهد. این مقدار مانند “start” عمل می‌کند اگر محور ویژگی موازی با محور متن نباشد.

  10. right: آیتم‌ها را در لبه راست ظرف تراز قرار می‌دهد. این مقدار مانند “start” عمل می‌کند اگر محور ویژگی موازی با محور متن نباشد.

  11. baseline، first baseline، last baseline: تعیین تراز با اولین یا آخرین خط پایه جعبه در گروه تقسیم خطوط پایه، جعبه‌ها را با پایه اول یا آخر مجموعه تقسیم می‌کند، با start به عنوان گزینه برای پایه اول و end برای آخرین پایه.

  12. stretch (کشیده): وقتی که اندازه کلیه موارد کمتر از محتوای ترازبندی‌کننده است، موارد با اندازه‌ی خودکار به طور متوسط بزرگ شده و با توجه به محدودیت‌های بیشینه ارتفاع/عرض، اندازه ترکیبی موارد محتوای ترازبندی‌کننده را پر می‌کند.

  13. safe (امن): در صورتی که اندازه مورد، از محتوای ترازبندی‌کننده بیشتر شود، حالت تراز آیتم به “شروع” تنظیم می‌شود.

  14. unsafe (ناامن): مقدار تراز مشخص شده را بدون توجه به اندازه‌های نسبی مورد و محتوای ترازبندی‌کننده احترام می‌گذارد.

  15. legacy (سنتی): این مقدار توسط فرزندان جعبه به ارث می‌رسد. با این حال، اگر یک فرزند justify-self: auto داشته باشد، تنها مقادیر left، right یا center در نظر گرفته می‌شود، نه کلمه کلیدی “سنتی”.

    • normal: موارد به طور عمومی ترازبندی نمی‌شوند و از ترازبندی پیش‌فرض مربوط به هر جعبه استفاده می‌کنند.
    • stretch: موارد به طور خودکار برای پر کردن فضای موجود در محیط ترازبندی‌کننده کشیده می‌شوند.

  2. ترازبندی موقعی:

    • انتخاب از بین center، start، end، flex-start، flex-end، self-start، self-end، left، یا right، همچنین به طور اختیاری unsafe یا safe.

  3. ترازبندی خط اصلی:

    • baseline: تراز موارد با اولین یا آخرین خط اصلی یک جعبه.
    • first baseline: تراز موارد با اولین خط اصلی یک جعبه.
    • last baseline: تراز موارد با آخرین خط اصلی یک جعبه.

  4. ترازبندی سنتی:

    • legacy: استفاده از ترازبندی سنتی با left یا right.

برای تغییر این متن بر روی دکمه ویرایش کلیک کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

normal Value

در این کد، یک جعبه با کلاس “box” تعریف شده است که شامل چهار دیو است. این جعبه با استفاده از display: grid; به عنوان یک شبکه تعریف شده است. هر عنصر داخلی این شبکه (دیوها) با استفاده از grid-template-columns: 1fr 1fr; به دو ستون تقسیم می‌شود.

ترازبندی justify-items: normal; روی جعبه اعمال می‌شود. این باعث می‌شود که عناصر داخلی در هر سلول شبکه، به طور پیش‌فرض بر روی محور ردیف ترازبندی شوند. این بدان معناست که عناصر درون دیوها به‌طور مرکز شده در هر سلول قرار می‌گیرند.

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

<!DOCTYPE html>
<html>
<head>
    <style> 
        .box {
            width: 100%;
            border: 2px solid black;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 40px;
            grid-gap: 10px;
            justify-items: normal; /* ترازبندی نرمال */
            background-color: greenyellow;
        }
        .box > div {
            width: 100px;
            border: 2px solid blue;
            background-color: lightcoral;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>Item 1</div>
        <div>Item 2</div>  
        <div>Item 3</div>
        <div>Item 4</div>
    </div>
</body>
</html>

stretch Value

در این کد، یک جعبه با کلاس “box” تعریف شده است که شامل چهار دیو است. این جعبه با استفاده از display: grid; به عنوان یک شبکه تعریف شده است. هر عنصر داخلی این شبکه (دیوها) با استفاده از grid-template-columns: 1fr 1fr; به دو ستون تقسیم می‌شود.

ترازبندی justify-items: stretch; روی جعبه اعمال می‌شود. این باعث می‌شود عناصر داخلی در هر سلول شبکه، به طور افقی کشیده شده و به اندازه ستون‌های خود کشیده شوند، بنابراین عرض آنها را پر می‌کنند.

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

<!DOCTYPE html>
<html>
<head>
    <style> 
        .box {
            width: 100%;
            border: 2px solid black;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 40px;
            grid-gap: 10px;
            justify-items: stretch; /* ترازبندی به صورت کشیده */
            background-color: greenyellow;
        }
        .box > div {
            border: 2px solid blue;
            background-color: lightcoral;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>Item 1</div>
        <div>Item 2</div>  
        <div>Item 3</div>
        <div>Item 4</div>
    </div>
</body>
</html>

start Value

در این کد، یک جعبه با کلاس “box” تعریف شده است که شامل چهار دیو است. این جعبه با استفاده از display: grid; به عنوان یک شبکه تعریف شده است. هر عنصر داخلی این شبکه (دیوها) با استفاده از grid-template-columns: 1fr 1fr; به دو ستون تقسیم می‌شود.

ترازبندی justify-items: start; روی جعبه اعمال می‌شود. این باعث می‌شود عناصر داخلی در هر سلول شبکه، به لبه شروع (سمت چپ) ترازبندی شوند. به این ترتیب، همه عناصر در ستون اول چیده می‌شوند و از سمت چپ شروع می‌شوند.

<!DOCTYPE html>
<html>
<head>
    <style> 
        .box {
            width: 100%;
            border: 2px solid black;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 40px;
            grid-gap: 10px;
            justify-items: start; /* ترازبندی با لبه شروع */
            background-color: greenyellow;
        }
        .box > div {
            width: 100px;
            border: 2px solid blue;
            background-color: lightcoral;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>Item 1</div>
        <div>Item 2</div>  
        <div>Item 3</div>
        <div>Item 4</div>
    </div>
</body>
</html>

end Value

در این قطعه کد، یک جعبه با کلاس “box” تعریف شده است که شامل چهار دیو است. این جعبه با استفاده از display: grid; به عنوان یک شبکه تعریف شده است. هر عنصر داخلی این شبکه (دیوها) با استفاده از grid-template-columns: 1fr 1fr; به دو ستون تقسیم می‌شود.

ترازبندی justify-items: end; روی جعبه اعمال می‌شود. این باعث می‌شود عناصر داخلی در هر سلول شبکه، به لبه پایان (سمت راست) ترازبندی شوند. به این ترتیب، همه عناصر در ستون دوم چیده می‌شوند و از سمت راست شروع می‌شوند.

<!DOCTYPE html>
<html>
<head>
    <style> 
        .box {
            width: 100%;
            border: 2px solid black;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 40px;
            grid-gap: 10px;
            justify-items: end; /* ترازبندی با لبه پایان */
            background-color: greenyellow;
        }
        .box > div {
            width: 100px;
            border: 2px solid blue;
            background-color: lightcoral;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>Item 1</div>
        <div>Item 2</div>  
        <div>Item 3</div>
        <div>Item 4</div>
    </div>
</body>
</html>

center Value

در این قطعه کد HTML و CSS، از ویژگی justify-items: center; استفاده شده است. این ویژگی باعث ترازبندی عناصر درون شبکه به صورت مرکزی در افقی می‌شود.

در این کد، یک شبکه با کلاس “box” و دو ستون تعریف شده است. با استفاده از justify-items: center;، تمام عناصر درون این شبکه به صورت مرکزی در افقی قرار می‌گیرند. به این ترتیب، عناصر درون هر سلول از نمایه افقی مرکزی شروع می‌شوند و به همین دلیل در این مثال عناصر به صورت مرکزی در افقی چیده شده‌اند.

<!DOCTYPE html>
<html>
<head>
    <style> 
        .box {
            width: 100%;
            border: 2px solid black;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 40px;
            grid-gap: 10px;
            justify-items: center; /* ترازبندی در مرکز */
            background-color: greenyellow;
        }
        .box > div {
            width: 100px;
            border: 2px solid blue;
            background-color: lightcoral;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>Item 1</div>
        <div>Item 2</div>  
        <div>Item 3</div>
        <div>Item 4</div>
    </div>
</body>
</html>

flex-start Value

در این قطعه کد HTML و CSS، از ویژگی justify-items: flex-start; استفاده شده است. این ویژگی باعث ترازبندی عناصر درون شبکه در حاشیه شروعی (از سمت چپ در زبانهایی که از چپ به راست نوشته می‌شود و از راست به چپ در زبانهایی که از راست به چپ نوشته می‌شود) می‌شود.

در این کد، یک شبکه با کلاس “box” و دو ستون تعریف شده است. با استفاده از justify-items: flex-start;، تمام عناصر درون این شبکه به حاشیه شروعی (از سمت چپ در زبانهایی که از چپ به راست نوشته می‌شود و از راست به چپ در زبانهایی که از راست به چپ نوشته می‌شود) ترازبندی می‌شوند. در نتیجه، عناصر درون هر سلول از سمت چپ قرار می‌گیرند.

<!DOCTYPE html>
<html>
<head>
    <style> 
        .box {
            width: 100%;
            border: 2px solid black;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 40px;
            grid-gap: 10px;
            justify-items: flex-start; /* ترازبندی در حاشیه شروعی */
            background-color: greenyellow;
        }
        .box > div {
            width: 100px;
            border: 2px solid blue;
            background-color: lightcoral;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>Item 1</div>
        <div>Item 2</div>  
        <div>Item 3</div>
        <div>Item 4</div>
    </div>
</body>
</html>

flex-end Value

در این قطعه کد HTML و CSS، از ویژگی justify-items: flex-end; استفاده شده است. این ویژگی باعث ترازبندی عناصر درون شبکه در حاشیه پایانی (از سمت راست در زبانهایی که از چپ به راست نوشته می‌شود و از راست به چپ در زبانهایی که از راست به چپ نوشته می‌شود) می‌شود.

در این کد، یک شبکه با کلاس “box” و دو ستون تعریف شده است. با استفاده از justify-items: flex-end;، تمام عناصر درون این شبکه به حاشیه پایانی (از سمت راست در زبانهایی که از چپ به راست نوشته می‌شود و از راست به چپ در زبانهایی که از راست به چپ نوشته می‌شود) ترازبندی می‌شوند. در نتیجه، عناصر درون هر سلول از سمت راست قرار می‌گیرند.

<!DOCTYPE html>
<html>
<head>
    <style> 
        .box {
            width: 100%;
            border: 2px solid black;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 40px;
            grid-gap: 10px;
            justify-items: flex-end; /* ترازبندی در حاشیه پایانی */
            background-color: greenyellow;
        }
        .box > div {
            width: 100px;
            border: 2px solid blue;
            background-color: lightcoral;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>Item 1</div>
        <div>Item 2</div>  
        <div>Item 3</div>
        <div>Item 4</div>
    </div>
</body>
</html>

self-start Value

در این قطعه کد HTML و CSS، از ویژگی justify-items: self-start; استفاده شده است. این ویژگی باعث ترازبندی عناصر درون شبکه در حاشیه شروع (از سمت چپ در زبانهایی که از چپ به راست نوشته می‌شود و از راست به چپ در زبانهایی که از راست به چپ نوشته می‌شود) می‌شود.

در این کد، یک شبکه با کلاس “box” و دو ستون تعریف شده است. با استفاده از justify-items: self-start;، تمام عناصر درون این شبکه به حاشیه شروع (از سمت چپ در زبانهایی که از چپ به راست نوشته می‌شود و از راست به چپ در زبانهایی که از راست به چپ نوشته می‌شود) ترازبندی می‌شوند. در نتیجه، عناصر درون هر سلول از سمت چپ قرار می‌گیرند.

<!DOCTYPE html>
<html>
<head>
    <style> 
        .box {
            width: 100%;
            border: 2px solid black;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 40px;
            grid-gap: 10px;
            justify-items: self-start; /* ترازبندی در حاشیه شروع */
            background-color: greenyellow;
        }
        .box > div {
            width: 100px;
            border: 2px solid blue;
            background-color: lightcoral;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>Item 1</div>
        <div>Item 2</div>  
        <div>Item 3</div>
        <div>Item 4</div>
    </div>
</body>
</html>

self-end Value

در این قطعه کد HTML و CSS از ویژگی justify-items: self-end; استفاده شده است. این ویژگی باعث ترازبندی عناصر درون شبکه در حاشیه پایانی (از سمت راست در زبانهایی که از چپ به راست نوشته می‌شود و از راست به چپ در زبانهایی که از راست به چپ نوشته می‌شود) می‌شود.

در این کد، یک شبکه با کلاس “box” و دو ستون تعریف شده است. با استفاده از justify-items: self-end;، تمام عناصر درون این شبکه به حاشیه پایانی (از سمت راست در زبانهایی که از چپ به راست نوشته می‌شود و از راست به چپ در زبانهایی که از راست به چپ نوشته می‌شود) ترازبندی می‌شوند. در نتیجه، عناصر درون هر سلول از سمت راست قرار می‌گیرند.

<!DOCTYPE html>
<html>
<head>
    <style> 
        .box {
            width: 100%;
            border: 2px solid black;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 40px;
            grid-gap: 10px;
            justify-items: self-end; /* ترازبندی در حاشیه پایانی */
            background-color: greenyellow;
        }
        .box > div {
            width: 100px;
            border: 2px solid blue;
            background-color: lightcoral;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>Item 1</div>
        <div>Item 2</div>  
        <div>Item 3</div>
        <div>Item 4</div>
    </div>
</body>
</html>

left Value

در این قطعه کد HTML و CSS از ویژگی justify-items: left; استفاده شده است. این ویژگی باعث ترازبندی عناصر درون شبکه در حاشیه چپ آن می‌شود.

در این کد، یک شبکه با کلاس “box” و دو ستون تعریف شده است. با استفاده از justify-items: left;، تمام عناصر درون این شبکه به حاشیه چپ ترازبندی می‌شوند. در نتیجه، عناصر درون هر سلول از سمت چپ قرار می‌گیرند و با یکدیگر چسبیده می‌شوند.

<!DOCTYPE html>
<html>
<head>
    <style> 
        .box {
            width: 100%;
            border: 2px solid black;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 40px;
            grid-gap: 10px;
            justify-items: left; /* ترازبندی در حاشیه چپ */
            background-color: greenyellow;
        }
        .box > div {
            width: 100px;
            border: 2px solid blue;
            background-color: lightcoral;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>Item 1</div>
        <div>Item 2</div>  
        <div>Item 3</div>
        <div>Item 4</div>
    </div>
</body>
</html>

right Value

این کد HTML و CSS از ویژگی justify-items: right; استفاده می‌کند. این ویژگی باعث ترازبندی عناصر درون شبکه در حاشیه راست آن می‌شود.

در این کد، یک شبکه با کلاس “box” و دو ستون تعریف شده است. با استفاده از justify-items: right;، تمام عناصر درون این شبکه به حاشیه راست ترازبندی می‌شوند. در نتیجه، عناصر درون هر سلول از سمت راست قرار می‌گیرند و با یکدیگر چسبیده می‌شوند.

<!DOCTYPE html>
<html>
<head>
    <style> 
        .box {
            width: 100%;
            border: 2px solid black;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 40px;
            grid-gap: 10px;
            justify-items: right; /* ترازبندی در حاشیه راست */
            background-color: greenyellow;
        }
        .box > div {
            width: 100px;
            border: 2px solid blue;
            background-color: lightcoral;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>Item 1</div>
        <div>Item 2</div>  
        <div>Item 3</div>
        <div>Item 4</div>
    </div>
</body>
</html>

baseline Value

این کد HTML و CSS از ویژگی justify-items: baseline; استفاده می‌کند. این ویژگی باعث ترازبندی عناصر درون شبکه بر اساس خط پایه متن آنها می‌شود. خط پایه یک خط تصویبی است که عناصر را بر اساس مکان متنشان ترتیب می‌دهد.

در این کد، یک شبکه با کلاس “box” و دو ستون تعریف شده است. با استفاده از justify-items: baseline;، تمام عناصر درون این شبکه بر اساس خط پایه متن خودشان ترازبندی می‌شوند. به عبارت دیگر، خط پایه متن هر عنصر به عنوان محور ترازبندی در نظر گرفته می‌شود و عناصر بر اساس آن مرتب می‌شوند.

<!DOCTYPE html>
<html>
<head>
    <style> 
        .box {
            width: 100%;
            border: 2px solid black;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 40px;
            grid-gap: 10px;
            justify-items: baseline; /* ترازبندی بر اساس خط پایه */
            background-color: greenyellow;
        }
        .box > div {
            width: 100px;
            border: 2px solid blue;
            background-color: lightcoral;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>Item 1</div>
        <div>Item 2</div>  
        <div>Item 3</div>
        <div>Item 4</div>
    </div>
</body>
</html>

last baseline Value

این کد HTML و CSS از ویژگی justify-items: last baseline; استفاده می‌کند. این ویژگی عناصر را بر اساس خط پایه آخرین عنصر در هر ردیف شبکه ترتیب می‌دهد.

در این کد، یک شبکه با کلاس “box” و دو ستون تعریف شده است. با استفاده از justify-items: last baseline;، ترازبندی عناصر بر اساس خط پایه آخرین عنصر در هر ردیف انجام می‌شود. به عبارت دیگر، خط پایه متن آخرین عنصر در هر ردیف به عنوان محور ترازبندی در نظر گرفته می‌شود و سایر عناصر بر اساس آن مرتب می‌شوند.

<!DOCTYPE html>
<html>
<head>
    <style> 
        .box {
            width: 100%;
            border: 2px solid black;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 40px;
            grid-gap: 10px;
            justify-items: last baseline; /* ترازبندی بر اساس خط پایه آخرین عنصر در هر ردیف */
            background-color: greenyellow;
        }
        .box > div {
            width: 100px;
            border: 2px solid blue;
            background-color: lightcoral;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>Item 1</div>
        <div>Item 2</div>  
        <div>Item 3</div>
        <div>Item 4</div>
    </div>
</body>
</html>

safe center Value

این کد HTML و CSS از ویژگی justify-items: safe center; استفاده می‌کند. این ویژگی عناصر را بر اساس مرکز ستون‌های شبکه ترتیب می‌دهد، اما در صورتی که عناصر بیرون از محدوده شبکه باشند، آن‌ها را به سمت محور متناظر با شروع ستون‌ها (عمودی) تراز می‌کند.

در این کد، یک شبکه با دو ستون تعریف شده است. با استفاده از justify-items: safe center;، عناصر در مرکز ستون‌های شبکه ترتیب داده می‌شوند. همچنین، در صورتی که اندازه عناصر بیشتر از محدوده شبکه باشد و از آن خارج شوند، آن‌ها به سمت محور عمودی شروع ستون‌ها (عمودی) تراز می‌شوند تا از اشکال در ظاهر صفحه جلوگیری شود.

<!DOCTYPE html>
<html>
<head>
    <style> 
        .grid-container {
            display: grid;
            grid-template-columns: repeat(2, 100px);
            justify-items: safe center; /* ترازبندی مرکزی و ایمن عناصر */
            grid-gap: 10px;
            border: 2px solid black;
            padding: 10px;
            background-color: greenyellow;
        }
        .grid-item {
            width: 350px; 
            height: 50px;
            background-color: lightcoral;
            border: 2px solid blue;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Item 1 (Overflow)</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3 (Overflow)</div>
        <div class="grid-item">Item 4</div>
    </div>
</body>
</html>

legacy right Value

این کد HTML و CSS از ویژگی justify-items: legacy right; استفاده می‌کند. این ویژگی، عناصر را به انتهای سلول‌های شبکه تراز می‌کند.

در این کد، یک شبکه با دو ستون تعریف شده است. با استفاده از justify-items: legacy right;، عناصر در انتهای سلول‌های شبکه قرار می‌گیرند.

<!DOCTYPE html>
<html>
<head>
    <style> 
        .box {
            width: 100%;
            border: 2px solid black;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 40px;
            grid-gap: 10px;
            justify-items: legacy right; /* ترازبندی عناصر به سمت راست */
            background-color: greenyellow;
        }
        .box > div {
            width: 100px;
            border: 2px solid blue;
            background-color: lightcoral;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>Item 1</div>
        <div>Item 2</div>  
        <div>Item 3</div>
        <div>Item 4</div>
    </div>
</body>
</html>

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
Python - محدود کردن داده (MongoDB Limit)

Python – محدود کردن داده (MongoDB Limit)

Python MongoDB محدود کردن نتایج برای محدود کردن نتایج در MongoDB، از متد limit() استفاده می‌کنیم. متد limit() یک...

بیشتر بخوانید
Python - بروزرسانی (MongoDB Update)

Python – بروزرسانی (MongoDB Update)

به‌روزرسانی یک رکورد برای به‌روزرسانی یک رکورد یا سند در MongoDB، از متد update_one() استفاده می‌کنیم. پارامتر اول متد...

بیشتر بخوانید
Python - حذف کالکشن (MongoDB Drop Collection)

Python – حذف کالکشن (MongoDB Drop Collection)

حذف کالکشن شما می‌توانید یک جدول یا کالکشن در MongoDB را با استفاده از متد drop() حذف کنید. مثالحذف...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.