tutorial - wbr element html




شبكة المغلق التفاف؟ (4)

هل من الممكن جعل التفاف شبكة CSS دون استخدام استعلامات الوسائط؟

في حالتي ، لديّ عدد غير محدد من العناصر التي أريد وضعها في شبكة وأريد التفافها. باستخدام فليكس بوكس ​​، أنا غير قادر على الفضاء الأشياء بشكل موثوق. أود تجنب مجموعة من استفسارات الوسائط أيضًا.

إليك بعض نماذج التعليمات البرمجية :

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

.grid > * {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

وهنا gif:

كملاحظة جانبية ، إذا كان يمكن لأي شخص أن يخبرني كيف يمكنني تجنب تحديد عرض جميع العناصر مثل أنا مع grid-template-columns التي ستكون كبيرة. أفضل أن يحدد الأطفال عرضهم الخاص.


استخدم إما auto-fill auto-fit أو auto-fit كرقم التكرار لتدوين repeat() .

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

auto-fill

عندما يتم إعطاء auto-fill كرقم التكرار ، إذا كان لحاوية الشبكة حجم محدد أو حجم أقصى في المحور ذي الصلة ، فإن عدد التكرار هو أكبر عدد صحيح موجب محتمل لا يتسبب في تجاوز الشبكة لحاوية الشبكة الخاصة بها.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

ستكرر الشبكة أكبر عدد ممكن من المسارات دون أن تفيض الحاوية الخاصة بها.

في هذه الحالة ، على سبيل المثال أعلاه (انظر الصورة) ، يمكن أن تتلاءم فقط 5 مسارات حاوية الشبكة دون الفائض. لا يوجد سوى 4 عناصر في شبكتنا ، لذلك يتم إنشاء عنصر خامس كمسار فارغ ضمن المساحة المتبقية.

بقية المساحة المتبقية ، المسار رقم 6 ، تنهي الشبكة الصريحة. هذا يعني أنه لم يكن هناك مساحة كافية لوضع مسار آخر.

auto-fit

تتصرف الكلمة الرئيسية auto-fit auto-fill مثل auto-fill ، إلا أنه بعد خوارزمية وضع عنصر الشبكة سيتم طي أي مسارات فارغة ضمن المساحة المتبقية إلى 0 .

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

ستظل الشبكة تكرر أكبر عدد ممكن من المسارات دون أن تفيض الحاوية الخاصة بها ، ولكن سيتم طي المسارات الفارغة إلى 0 .

يتم التعامل مع المسار المنهار على أنه يحتوي على وظيفة تغيير حجم المسار الثابت التي تبلغ 0 0px .

على عكس مثال صورة auto-fill ، يتم طي المسار الخامس الفارغ ، مما يؤدي إلى إنهاء الشبكة الصريحة بعد العنصر الرابع مباشرة.

auto-fill auto-fit مقابل auto-fit

يكون الفرق بين الاثنين ملحوظًا عند استخدام الدالة minmax() .

استخدم minmax(186px, 1fr) لنطاق العناصر من 186px إلى 186px بالإضافة إلى جزء صغير من المساحة المتبقية في حاوية الشبكة.

عند استخدام auto-fill ، ستنمو العناصر بمجرد عدم وجود مساحة لوضع مسارات فارغة.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

عند استخدام auto-fit ، ستنمو العناصر لملء المساحة المتبقية لأن كل المسارات الفارغة قد انهارت إلى 0px .

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

ملعب:

CodePen

فحص مسارات الملء التلقائي

فحص المسارات التلقائية


تريد إما auto-fit auto-fill أو auto-fill داخل وظيفة repeat() :

grid-template-columns: repeat(auto-fit, 186px);

يصبح الفرق بين الاثنين واضحًا إذا كنت تستخدم أيضًا minmax() للسماح بأحجام أعمدة مرنة:

grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));

يسمح هذا لأعمدةك بالثني في الحجم ، بدءًا من 186 بكسل إلى أعمدة متساوية العرض تمتد عبر العرض الكامل للحاوية. سيؤدي auto-fill إنشاء أكبر عدد ممكن من الأعمدة في العرض. على سبيل المثال ، إذا كان هناك خمسة أعمدة مناسبة ، على الرغم من أن لديك أربعة عناصر شبكة فقط ، فسيكون هناك عمود خامس فارغ:

سيؤدي استخدام auto-fit بدلاً من ذلك إلى منع الأعمدة الفارغة ، وتمديد أعمالك إذا لزم الأمر:


ها هي محاولتي. معذرة ، كنت أشعر بالإبداع الإضافي.

طريقتي هي div الأصل مع أبعاد ثابتة . الباقي هو مجرد تركيب المحتوى داخل هذا div وفقا لذلك.

سيعيد ذلك تغيير حجم الصور بغض النظر عن نسبة العرض إلى الارتفاع. لن يكون هناك أي زراعة قاسية أيضًا.

body {
        background: #131418;
	text-align: center;
	margin: 0 auto;
}

.my-image-parent {
	display: inline-block;
	width: 300px;
	height: 300px;
	line-height: 300px; /* should match your div height */
	text-align: center;
	font-size: 0;
}

/* Start demonstration background fluff */
    .bg1 {background: url(https://unsplash.it/801/799);}
    .bg2 {background: url(https://unsplash.it/799/800);}
    .bg3 {background: url(https://unsplash.it/800/799);}
    .bg4 {background: url(https://unsplash.it/801/801);}
    .bg5 {background: url(https://unsplash.it/802/800);}
    .bg6 {background: url(https://unsplash.it/800/802);}
    .bg7 {background: url(https://unsplash.it/802/802);}
    .bg8 {background: url(https://unsplash.it/803/800);}
    .bg9 {background: url(https://unsplash.it/800/803);}
    .bg10 {background: url(https://unsplash.it/803/803);}
    .bg11 {background: url(https://unsplash.it/803/799);}
    .bg12 {background: url(https://unsplash.it/799/803);}
    .bg13 {background: url(https://unsplash.it/806/799);}
    .bg14 {background: url(https://unsplash.it/805/799);}
    .bg15 {background: url(https://unsplash.it/798/804);}
    .bg16 {background: url(https://unsplash.it/804/799);}
    .bg17 {background: url(https://unsplash.it/804/804);}
    .bg18 {background: url(https://unsplash.it/799/804);}
    .bg19 {background: url(https://unsplash.it/798/803);}
    .bg20 {background: url(https://unsplash.it/803/797);}
/* end demonstration background fluff */

.my-image {
	width: auto;
	height: 100%;
	vertical-align: middle;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
<div class="my-image-parent">
 <div class="my-image bg1"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg2"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg3"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg4"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg5"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg6"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg7"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg8"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg9"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg10"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg11"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg12"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg13"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg14"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg15"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg16"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg17"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg18"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg19"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg20"></div>
</div>


هل تبحث عن auto-fill ؟

grid-template-columns: repeat(auto-fill, 186px);

العرض التوضيحي: http://codepen.io/alanbuchanan/pen/wJRMox

لاستخدام المساحة المتاحة بشكل أكثر كفاءة ، يمكنك استخدام minmax ، والتمرير auto كالوسيطة الثانية:

grid-template-columns: repeat(auto-fill, minmax(186px, auto));

العرض التوضيحي: http://codepen.io/alanbuchanan/pen/jBXWLR

إذا كنت لا تريد الأعمدة الفارغة ، فيمكنك استخدام auto-fit auto-fill بدلاً من auto-fill .





css-grid