CSS গ্রিডে উভয় অক্ষ বরাবর কন্টেন্ট অ্যালাইনমেন্ট

গ্রিডে প্রায়শই একই সাথে অনুভূমিক এবং উল্লম্ব উভয় অক্ষ বরাবর কন্টেন্ট অ্যালাইন করার প্রয়োজন হতে পারে। এই উদ্দেশ্যে আমরা আগের পাঠে আপনি শিখেছেন যে দুটি বৈশিষ্ট্য একসাথে ব্যবহার করতে পারি: justify-content এবং align-content।

উল্লম্ব অক্ষের শুরু এবং অনুভূমিক অক্ষের শেষে

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  justify-content: flex-end;
  align-content: flex-start;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

উল্লম্ব অক্ষের শেষ এবং অনুভূমিক অক্ষের শুরুতে

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  justify-content: flex-start;
  align-content: flex-end;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

উল্লম্ব অক্ষ এবং অনুভূমিক অক্ষের কেন্দ্রে

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  justify-content: flex-end;
  align-content: center;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

ব্যবহারিক কাজ