CSS গ্রিডে auto-এর মান

গ্রিডে সারি এবং কলামের আকার নির্দিষ্ট করার সময় auto মান ব্যবহার করা যেতে পারে। এই ক্ষেত্রে, ব্লকগুলি শুধুমাত্র পিক্সেলে নির্দিষ্ট করা প্রস্থ বাদ দিয়ে তাদের জন্য উপলব্ধ সমস্ত মুক্ত স্থান পূরণ করবে। আসুন উদাহরণের মাধ্যমে দেখি।

আসুন প্রথম এবং তৃতীয় কলামে পিক্সেলে একটি নির্দিষ্ট প্রস্থ নির্দিষ্ট করি, এবং দ্বিতীয় কলামটি স্বয়ংক্রিয়ভাবে অবশিষ্ট স্থান নিক:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px auto 150px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат: