CSS ଗ୍ରୀଡ୍ |

ଉଦାହରଣ ଏବଂ କୋଡ୍ ସ୍ନିପେଟ୍ ସହିତ CSS ଗ୍ରୀଡ୍ ଉପରେ ନିର୍ମିତ ଆମର ବିକଳ୍ପ ଲେଆଉଟ୍ ସିଷ୍ଟମକୁ କିପରି ସକ୍ଷମ, ବ୍ୟବହାର ଏବଂ କଷ୍ଟୋମାଇଜ୍ କରିବାକୁ ଶିଖ |

ଏହି ପୃଷ୍ଠାରେ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ଏକ ଦଶନ୍ଧିରୁ ଅଧିକ CSS ଲେଆଉଟ୍ କ ques ଶଳର ସମାପ୍ତିକୁ ପ୍ରତିପାଦିତ କରେ, ଲକ୍ଷ ଲକ୍ଷ ଲୋକଙ୍କ ଦ୍ୱାରା ଚେଷ୍ଟା କରାଯାଇଥିଲା ଏବଂ ପରୀକ୍ଷଣ କରାଯାଇଥିଲା | କିନ୍ତୁ, ନୂତନ CSS ଗ୍ରୀଡ୍ ପରି ବ୍ରାଉଜରରେ ଆମେ ଦେଖୁଥିବା ଅନେକ ଆଧୁନିକ CSS ବ features ଶିଷ୍ଟ୍ୟ ଏବଂ କ ques ଶଳ ବିନା ଏହା ମଧ୍ୟ ସୃଷ୍ଟି କରାଯାଇଥିଲା |

ହେଡ୍ ଅପ୍ - ଆମର CSS ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ପରୀକ୍ଷାମୂଳକ ଏବଂ v5.1.0 ପରି ଅପ୍ଟ-ଇନ୍ ଅଟେ! ଏହାକୁ ଆପଣଙ୍କ ପାଇଁ ପ୍ରଦର୍ଶନ କରିବାକୁ ଆମେ ଏହାକୁ ଆମର ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ର CSS ରେ ଅନ୍ତର୍ଭୁକ୍ତ କରିଛୁ, କିନ୍ତୁ ଏହା ଡିଫଲ୍ଟ ଭାବରେ ଅକ୍ଷମ ହୋଇଛି | ତୁମର ପ୍ରୋଜେକ୍ଟରେ ଏହାକୁ କିପରି ସକ୍ଷମ କରାଯିବ ଶିଖିବା ପାଇଁ ପ reading ଼ା ଜାରି ରଖ |

ଏହା କିପରି କାମ କରେ |

ବୁଟଷ୍ଟ୍ରାପ୍ With ସହିତ, ଆମେ ଏକ ପୃଥକ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ସକ୍ଷମ କରିବାକୁ ବିକଳ୍ପ ଯୋଡିଛୁ ଯାହା CSS ଗ୍ରୀଡ୍ ଉପରେ ନିର୍ମିତ, କିନ୍ତୁ ବୁଟଷ୍ଟ୍ରାପ୍ ଟ୍ୱିଷ୍ଟ ସହିତ | ତୁମେ ତଥାପି କ୍ଲାସ୍ ପାଇବ ଯାହାକୁ ତୁମେ ପ୍ରତିକ୍ରିୟାଶୀଳ ଲେଆଉଟ୍ ଗଠନ ପାଇଁ ଏକ ଇଚ୍ଛାରେ ପ୍ରୟୋଗ କରିପାରିବ, କିନ୍ତୁ ହୁଡ୍ ତଳେ ଏକ ଭିନ୍ନ ଆଭିମୁଖ୍ୟ ସହିତ |

CSS ଗ୍ରୀଡ୍ ଅପ୍ଟ-ଇନ୍ ଅଟେ | ସେଟିଂ କରି ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମକୁ ଅକ୍ଷମ କରନ୍ତୁ $enable-grid-classes: falseଏବଂ ସେଟିଂ ଦ୍ୱାରା CSS ଗ୍ରୀଡ୍ ସକ୍ଷମ କରନ୍ତୁ $enable-cssgrid: true| ତାପରେ, ତୁମର ସାସ୍କୁ ପୁନ omp ସଂକଳନ କର |
.rowସହିତ ଉଦାହରଣଗୁଡିକ ବଦଳାନ୍ତୁ .grid| .gridକ୍ଲାସ୍ ସେଟ୍ display: gridକରେ ଏବଂ ସୃଷ୍ଟି କରେ ଯାହାକୁ grid-templateତୁମେ ତୁମର HTML ସହିତ ନିର୍ମାଣ କର |
.col-*କ୍ଲାସ୍ ସହିତ କ୍ଲାସ୍ ବଦଳାନ୍ତୁ .g-col-*| ଏହାର କାରଣ ହେଉଛି ଆମର CSS ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭଗୁଡ଼ିକ grid-columnବଦଳରେ ସମ୍ପତ୍ତି ବ୍ୟବହାର କରେ width|
ସ୍ତମ୍ଭ ଏବଂ ଗୁଟର ଆକାର CSS ଭେରିଏବଲ୍ ମାଧ୍ୟମରେ ସେଟ୍ ହୋଇଛି | ଏହାକୁ ପ୍ୟାରେଣ୍ଟ୍ ରେ ସେଟ୍ କରନ୍ତୁ .gridଏବଂ ଆପଣ ଯାହା ଚାହାଁନ୍ତି, ଇନଲାଇନ କିମ୍ବା ଏକ ଷ୍ଟାଇଲସିଟ୍ ରେ, ଏବଂ ସହିତ କଷ୍ଟୋମାଇଜ୍ --bs-columnsକରନ୍ତୁ --bs-gap|

ଭବିଷ୍ୟତରେ, ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଏକ ହାଇବ୍ରିଡ୍ ସମାଧାନକୁ ସ୍ଥାନାନ୍ତରିତ ହେବ gapକାରଣ ଫ୍ଲେକ୍ସବକ୍ସ ପାଇଁ ସମ୍ପତ୍ତି ପ୍ରାୟ ସମ୍ପୂର୍ଣ୍ଣ ବ୍ରାଉଜର୍ ସମର୍ଥନ ହାସଲ କରିଛି |

ମୁଖ୍ୟ ପାର୍ଥକ୍ୟ |

ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ସହିତ ତୁଳନା:

ଫ୍ଲେକ୍ସ ଉପଯୋଗୀତା CSS ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭକୁ ସମାନ ଭାବରେ ପ୍ରଭାବିତ କରେ ନାହିଁ |
ଫାଟଗୁଡିକ ଗୁଟରଗୁଡିକ ବଦଳାଇଥାଏ | ପ୍ରପର୍ଟି ଆମର ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମରୁ gapଭୂସମାନ୍ତର ସ୍ଥାନାନ୍ତରିତ କରେ ଏବଂ ଅଧିକ ପରି କାର୍ଯ୍ୟ କରେ |paddingmargin
ଏହିପରି, .rows ପରି, .grids ର କ negative ଣସି ନକାରାତ୍ମକ ମାର୍ଜିନ ନାହିଁ ଏବଂ ଗ୍ରୀଡ୍ ଗୁଟର ପରିବର୍ତ୍ତନ ପାଇଁ ମାର୍ଜିନ୍ ୟୁଟିଲିଟି ବ୍ୟବହାର କରାଯାଇପାରିବ ନାହିଁ | ଗ୍ରୀଡ୍ ଫାଙ୍କଗୁଡିକ ଡିଫଲ୍ଟ ଭାବରେ ଭୂସମାନ୍ତର ଏବଂ ଭୂଲମ୍ବ ଭାବରେ ପ୍ରୟୋଗ କରାଯାଏ | ଅଧିକ ବିବରଣୀ ପାଇଁ କଷ୍ଟୋମାଇଜ୍ ବିଭାଗ ଦେଖନ୍ତୁ |
style="--bs-columns: 3;"ଇନଲାଇନ ଏବଂ କଷ୍ଟମ୍ ଶ yles ଳୀଗୁଡିକ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ (ଯଥା, ବନାମ class="row-cols-3") ପାଇଁ ସ୍ଥାନାନ୍ତର ଭାବରେ ଦେଖାଯିବା ଉଚିତ |
ନେଷ୍ଟିଙ୍ଗ୍ ସମାନ ଭାବରେ କାମ କରେ, କିନ୍ତୁ ଏକ ନେଷ୍ଟେଡ୍ ର ପ୍ରତ୍ୟେକ ଉଦାହରଣରେ ତୁମର ସ୍ତମ୍ଭ ଗଣନାକୁ ପୁନ res ସେଟ୍ କରିବାକୁ ଆବଶ୍ୟକ କରିପାରନ୍ତି .grid| ବିବରଣୀ ପାଇଁ ବସା ବିଭାଗ ଦେଖନ୍ତୁ |

ଉଦାହରଣଗୁଡିକ

ତିନୋଟି ସ୍ତମ୍ଭ

ସମସ୍ତ ଭ୍ୟୁପୋର୍ଟ ଏବଂ ଡିଭାଇସ୍ ମଧ୍ୟରେ ତିନୋଟି ସମାନ-ଓସାର ସ୍ତମ୍ଭ .g-col-4କ୍ଲାସ୍ ବ୍ୟବହାର କରି ସୃଷ୍ଟି କରାଯାଇପାରିବ | ଭ୍ୟୁପୋର୍ଟ୍ ସାଇଜ୍ ଦ୍ୱାରା ଲେଆଉଟ୍ ପରିବର୍ତ୍ତନ କରିବାକୁ ପ୍ରତିକ୍ରିୟାଶୀଳ କ୍ଲାସ୍ ଯୋଡନ୍ତୁ |

.g-col-4

html

<div class="grid text-center">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

ପ୍ରତିକ୍ରିୟାଶୀଳ |

ଭ୍ୟୁପୋର୍ଟ୍ ଗୁଡିକରେ ଆପଣଙ୍କର ଲେଆଉଟ୍ ସଜାଡିବା ପାଇଁ ପ୍ରତିକ୍ରିୟାଶୀଳ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ | ଏଠାରେ ଆମେ ସଂକୀର୍ଣ୍ଣ ଦୃଶ୍ୟ ଉପରେ ଦୁଇଟି ସ୍ତମ୍ଭ ସହିତ ଆରମ୍ଭ କରିବା, ଏବଂ ତାପରେ ମଧ୍ୟମ ଦୃଶ୍ୟ ଏବଂ ଉପରେ ତିନୋଟି ସ୍ତମ୍ଭକୁ ବ grow ଼ିବା |

.g-col-6 .g-col-md-4 |

html

<div class="grid text-center">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

ସମସ୍ତ ଭ୍ୟୁପୋର୍ଟରେ ଏହାକୁ ଏହି ଦୁଇଟି ସ୍ତମ୍ଭ ଲେଆଉଟ୍ ସହିତ ତୁଳନା କରନ୍ତୁ |

.g-col-6

html

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ରାପିଙ୍ଗ୍ |

ଭୂସମାନ୍ତରାଳରେ ଆଉ କ room ଣସି ସ୍ଥାନ ନଥିବାବେଳେ ଗ୍ରୀଡ୍ ଆଇଟମଗୁଡିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ପରବର୍ତ୍ତୀ ଧାଡିରେ ଗୁଡ଼ାଇ ହୋଇଯାଏ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ gapଗ୍ରୀଡ୍ ଆଇଟମ୍ ମଧ୍ୟରେ ଭୂସମାନ୍ତର ଏବଂ ଭୂଲମ୍ବ ଫାଙ୍କ ପାଇଁ ପ୍ରଯୁଜ୍ୟ |

.g-col-6

html

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ଆରମ୍ଭ ହୁଏ |

ଆରମ୍ଭ କ୍ଲାସ୍ ଗୁଡିକ ଆମର ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ଅଫସେଟ୍ କ୍ଲାସ୍ ବଦଳାଇବାକୁ ଲକ୍ଷ୍ୟ ରଖିଛି, କିନ୍ତୁ ସେଗୁଡ଼ିକ ସଂପୂର୍ଣ୍ଣ ସମାନ ନୁହଁନ୍ତି | CSS ଗ୍ରୀଡ୍ ଶ yles ଳୀ ମାଧ୍ୟମରେ ଏକ ଗ୍ରୀଡ୍ ଟେମ୍ପଲେଟ୍ ସୃଷ୍ଟି କରେ ଯାହା ବ୍ରାଉଜରକୁ “ଏହି ସ୍ତମ୍ଭରୁ ଆରମ୍ଭ” ଏବଂ “ଏହି ସ୍ତମ୍ଭରେ ଶେଷ” କୁ କହିଥାଏ | ସେହି ଗୁଣଗୁଡ଼ିକ ହେଉଛି grid-column-startଏବଂ grid-column-end। ଷ୍ଟାର୍ଟ କ୍ଲାସ୍ ଗୁଡିକ ପୂର୍ବ ପାଇଁ ଶୋର୍ଥାଣ୍ଡ୍ | ତୁମର ସ୍ତମ୍ଭଗୁଡ଼ିକୁ ଆକାର ଏବଂ ଆଲାଇନ୍ କରିବା ପାଇଁ ସେମାନଙ୍କୁ ସ୍ତମ୍ଭ ଶ୍ରେଣୀଗୁଡ଼ିକ ସହିତ ଯୋଡିଦିଅ | ଏହି ଗୁଣଗୁଡିକ ପାଇଁ ଏକ ଅବ alid ଧ ମୂଲ୍ୟ 1ପରି ଆରମ୍ଭ କ୍ଲାସ୍ ଆରମ୍ଭ |0

.g-col-3 .g-start-2 |

.g-col-4 .g-start-6

html

<div class="grid text-center">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

ଅଟୋ ସ୍ତମ୍ଭ

ଯେତେବେଳେ ଗ୍ରୀଡ୍ ଆଇଟମ୍ ଗୁଡିକ ଉପରେ କ classes ଣସି କ୍ଲାସ୍ ନାହିଁ (a ର ତୁରନ୍ତ ପିଲାମାନେ .grid), ପ୍ରତ୍ୟେକ ଗ୍ରୀଡ୍ ଆଇଟମ୍ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଗୋଟିଏ ସ୍ତମ୍ଭରେ ଆକାରିତ ହେବ |

୧

html

<div class="grid text-center">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

ଏହି ଆଚରଣ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ ଶ୍ରେଣୀ ସହିତ ମିଶ୍ରିତ ହୋଇପାରେ |

.g-col-6

୧

html

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

ବସା ବାନ୍ଧିବା |

ଆମର ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ପରି, ଆମର CSS ଗ୍ରୀଡ୍ ଗୁଡିକ .grids ର ସହଜ ବସା ପାଇଁ ଅନୁମତି ଦିଏ | ତଥାପି, ଡିଫଲ୍ଟ ପରି, ଏହି ଗ୍ରୀଡ୍ ଧାଡି, ସ୍ତମ୍ଭ, ଏବଂ ଫାଙ୍କରେ ପରିବର୍ତ୍ତନ ପାଇଥାଏ | ନିମ୍ନରେ ଥିବା ଉଦାହରଣକୁ ବିଚାର କରନ୍ତୁ:

ଆମେ ଏକ ସ୍ଥାନୀୟ CSS ଭେରିଏବଲ୍ ସହିତ ଡିଫଲ୍ଟ ସଂଖ୍ୟା ସ୍ତମ୍ଭଗୁଡ଼ିକୁ ନବଲିଖନ କରୁ --bs-columns: 3:
ପ୍ରଥମ ଅଟୋ-ସ୍ତମ୍ଭରେ, ସ୍ତମ୍ଭ ଗଣନା ଉତ୍ତରାଧିକାରୀ ଅଟେ ଏବଂ ପ୍ରତ୍ୟେକ ସ୍ତମ୍ଭ ଉପଲବ୍ଧ ପ୍ରସ୍ଥର ଏକ ତୃତୀୟାଂଶ |
ଦ୍ୱିତୀୟ ଅଟୋ-ସ୍ତମ୍ଭରେ, ଆମେ ନେଷ୍ଟେଡ୍ ଉପରେ ସ୍ତମ୍ଭ ଗଣନାକୁ .grid12 କୁ ପୁନ res ସେଟ୍ କରିଛୁ (ଆମର ଡିଫଲ୍ଟ) |
ତୃତୀୟ ଅଟୋ-ସ୍ତମ୍ଭରେ କ ested ଣସି ବସ୍ତୁ ନାହିଁ |

ଅଭ୍ୟାସରେ ଏହା ଆମର ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ତୁଳନାରେ ଅଧିକ ଜଟିଳ ଏବଂ କଷ୍ଟମ୍ ଲେଆଉଟ୍ ପାଇଁ ଅନୁମତି ଦିଏ |

ପ୍ରଥମ ଅଟୋ-ସ୍ତମ୍ଭ |

ଅଟୋ-ସ୍ତମ୍ଭ |

ଦ୍ୱିତୀୟ ଅଟୋ-ସ୍ତମ୍ଭ |

12 ର 6

12 ର 4

12 ର 2

ତୃତୀୟ ଅଟୋ-ସ୍ତମ୍ଭ |

html

<div class="grid text-center" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

କଷ୍ଟମାଇଜ୍

ସ୍ତମ୍ଭ ସଂଖ୍ୟା, ଧାଡି ସଂଖ୍ୟା, ଏବଂ ସ୍ଥାନୀୟ CSS ଭେରିଏବଲ୍ ସହିତ ଫାଙ୍କର ପ୍ରସ୍ଥ କଷ୍ଟୋମାଇଜ୍ କରନ୍ତୁ |

ଭେରିଏବଲ୍	ଫଲବ୍ୟାକ୍ ମୂଲ୍ୟ	ବର୍ଣ୍ଣନା
`--bs-rows`	`1`	ତୁମର ଗ୍ରୀଡ୍ ଟେମ୍ପଲେଟରେ ଧାଡି ସଂଖ୍ୟା \|
`--bs-columns`	`12`	ତୁମର ଗ୍ରୀଡ୍ ଟେମ୍ପଲେଟରେ ସ୍ତମ୍ଭ ସଂଖ୍ୟା \|
`--bs-gap`	`1.5rem`	ସ୍ତମ୍ଭ ମଧ୍ୟରେ ଥିବା ବ୍ୟବଧାନର ଆକାର (ଭୂଲମ୍ବ ଏବଂ ଭୂସମାନ୍ତର)

ଏହି CSS ଭେରିଏବଲ୍ସର କ default ଣସି ଡିଫଲ୍ଟ ମୂଲ୍ୟ ନାହିଁ; ଏହା ପରିବର୍ତ୍ତେ, ସେମାନେ ଫଲବ୍ୟାକ୍ ମୂଲ୍ୟ ପ୍ରୟୋଗ କରନ୍ତି ଯାହାକି ଏକ ସ୍ଥାନୀୟ ଉଦାହରଣ ପ୍ରଦାନ ନହେବା ପର୍ଯ୍ୟନ୍ତ ବ୍ୟବହୃତ ହୁଏ | ଉଦାହରଣ ସ୍ୱରୂପ, ଆମେ var(--bs-rows, 1)ଆମର CSS ଗ୍ରୀଡ୍ ଧାଡିଗୁଡିକ ପାଇଁ ବ୍ୟବହାର କରୁ, ଯାହା ଅଣଦେଖା --bs-rowsକରେ କାରଣ ତାହା ଏପର୍ଯ୍ୟନ୍ତ କ anywhere ଣସି ସ୍ଥାନରେ ସେଟ୍ ହୋଇନାହିଁ | ଥରେ ଏହା ହୋଇଗଲେ, .gridଉଦାହରଣଟି ସେହି ମୂଲ୍ୟକୁ ଫଲବ୍ୟାକ୍ ମୂଲ୍ୟ ବଦଳରେ ବ୍ୟବହାର କରିବ 1|

କ gr ଣସି ଗ୍ରୀଡ୍ କ୍ଲାସ୍ ନାହିଁ |

ତତକ୍ଷଣାତ୍ ଶିଶୁ ଉପାଦାନଗୁଡ଼ିକ ହେଉଛି ଗ୍ରୀଡ୍ ଆଇଟମ୍, ତେଣୁ ସେମାନେ ଏକ ଶ୍ରେଣୀକୁ .gridସ୍ପଷ୍ଟ ଭାବରେ ଯୋଗ ନକରି ଆକାରର ହେବେ |.g-col

ଅଟୋ-ସ୍ତମ୍ଭ |

html

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

ସ୍ତମ୍ଭ ଏବଂ ଫାଙ୍କ |

ସ୍ତମ୍ଭ ସଂଖ୍ୟା ଏବଂ ବ୍ୟବଧାନକୁ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |

.g-col-2

html

<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>

.g-col-6

.g-col-4

html

<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

ଧାଡି ଯୋଡିବା |

ଅଧିକ ଧାଡି ଯୋଡିବା ଏବଂ ସ୍ତମ୍ଭର ସ୍ଥାନ ପରିବର୍ତ୍ତନ:

ଅଟୋ-ସ୍ତମ୍ଭ |

html

<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

ଫାଙ୍କା |

କେବଳ ପରିବର୍ତ୍ତନ କରି ଭୂଲମ୍ବ ଫାଙ୍କଗୁଡିକ ପରିବର୍ତ୍ତନ କରନ୍ତୁ row-gap| ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଆମେ s gapରେ ବ୍ୟବହାର କରୁ , .gridକିନ୍ତୁ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ପରିବର୍ତ୍ତନ କରାଯାଇପାରିବ |row-gapcolumn-gap

.g-col-6

html

<div class="grid text-center" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ସେହି କାରଣରୁ, ଆପଣଙ୍କର ଭିନ୍ନ ଭୂଲମ୍ବ ଏବଂ ଭୂସମାନ୍ତର gaps ରହିପାରେ, ଯାହା ଗୋଟିଏ ମୂଲ୍ୟ (ସମସ୍ତ ପାର୍ଶ୍ୱ) କିମ୍ବା ଏକ ଯୁଗଳ ମୂଲ୍ୟ (ଭୂଲମ୍ବ ଏବଂ ଭୂସମାନ୍ତର) ନେଇପାରେ | gapଏହା ଆମ --bs-gapCSS ଭେରିଏବଲ୍ ପାଇଁ ଏକ ଇନଲାଇନ ଶ style ଳୀ ସହିତ ପ୍ରୟୋଗ ହୋଇପାରିବ |

.g-col-6

html

<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ସାସ୍ |

CSS ଗ୍ରୀଡ୍ ର ଗୋଟିଏ ସୀମା ହେଉଛି ଆମର ଡିଫଲ୍ଟ ଶ୍ରେଣୀଗୁଡ଼ିକ ଦୁଇଟି ସାସ୍ ଭେରିଏବଲ୍ ଦ୍ୱାରା ସୃଷ୍ଟି ହୋଇଥାଏ, $grid-columnsଏବଂ $grid-gutter-width| ଏହା ଆମ ସଂକଳିତ CSS ରେ ସୃଷ୍ଟି ହୋଇଥିବା ଶ୍ରେଣୀର ସଂଖ୍ୟାକୁ ଫଳପ୍ରଦ ଭାବରେ ନିର୍ଣ୍ଣୟ କରେ | ଆପଣଙ୍କର ଏଠାରେ ଦୁଇଟି ବିକଳ୍ପ ଅଛି:

ସେହି ଡିଫଲ୍ଟ ସାସ୍ ଭେରିଏବଲ୍ ଗୁଡିକୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ ଏବଂ ଆପଣଙ୍କର CSS କୁ ପୁନ omp ସଂକଳନ କରନ୍ତୁ |
ପ୍ରଦତ୍ତ ଶ୍ରେଣୀଗୁଡ଼ିକୁ ବୃଦ୍ଧି କରିବା ପାଇଁ ଇନଲାଇନ କିମ୍ବା କଷ୍ଟମ୍ ଶ yles ଳୀ ବ୍ୟବହାର କରନ୍ତୁ |

ଉଦାହରଣ ସ୍ୱରୂପ, ଆପଣ ସ୍ତମ୍ଭ ଗଣନାକୁ ବ increase ାଇ ପାରିବେ ଏବଂ ବ୍ୟବଧାନର ଆକାର ପରିବର୍ତ୍ତନ କରିପାରିବେ, ଏବଂ ତାପରେ ଇନଲାଇନ ଶ yles ଳୀ ଏବଂ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ CSS ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ ଶ୍ରେଣୀର ମିଶ୍ରଣ ସହିତ ଆପଣଙ୍କର “ସ୍ତମ୍ଭ” କୁ ଆକାର କରିପାରିବେ .g-col-4|

14 ସ୍ତମ୍ଭ

.g-col-4

html

<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>