CSS එකේ ස්වයංක්‍රීය පළල සහිත ටයිල් වල ඉඩ ප්‍රමාණය

පේළියකට බ්ලොක් හතරක් ඇති ටයිල් එකක් අප සතුව ඇතැයි සිතමු:

css.child {
  width: 25%;
}

අපගේ බ්ලොක් වලට තිරස් සහ සිරස් අතට ප්‍රතිශත වලින් ඉඩ ප්‍රමාණය එකතු කරමු:

css.child {
  margin-right: 1.5%;
  margin-bottom: 1.5%;
}
.child:nth-child(4n) {
  margin-right: 0;
}

අප කල දේ මේ වන තුරු නිවැරදිව ක්‍රියා නොකරනු ඇත, මන්ද බ්ලොක් සහ ඉඩ ප්‍රමාණයේ සම්පූර්ණ පළල 100% ට වඩා වැඩි වේ. නිවැරදිව ක්‍රියා කිරීම සඳහා අපගේ ඉඩ ප්‍රමාණය සඳහා ඉඩක් ලබා දීමට සෑම බ්ලොකයකින්ම කොටසක් කපා හැරිය යුතුය. අපි මෙම කොටස් ගණනය කරමු.

අපගේ නඩුවේදී, බ්ලොක් හතරක් ඇති අතර, ඒවා අතර ඉඩ ප්‍රමාණ තුනක් ඇත - ප්‍රතිශතයෙන් එකහමාරක්. කපා හැරිය යුතු කොටස ගණනය කිරීමට, සම්පූර්ණ ඉඩ ප්‍රමාණය බ්ලොක් ගණනින් බෙදිය යුතුය:

එවිට සෑම බ්ලොකයකම පළල සමාන වේ:

පහත කේතය ලැබේ:

css.child {
  width: 23.875%;
  margin-right: 1.5%;
  margin-bottom: 1.5%;
}
.child:nth-child(4n) {
  margin-right: 0;
}

මෙම ඉඩ ප්‍රමාණය අප විසින්ම ගණනය නොකර, ගණනය කිරීමේ වැඩ calc ශ්‍රිතයට පැවරිය හැකිය:

css.child {
  width: calc(25% - 1.5% * 3 / 4);
  margin-right: 1.5%;
  margin-bottom: 1.5%;
}
.child:nth-child(4n) {
  margin-right: 0;
}

බ්ලොකයේ පළල ද ගණනය කරන්න calc ශ්‍රිතයට ඉඩ දෙමු:

css.child {
  width: calc(100% / 4 - 1.5% * 3 / 4);
  margin-right: 1.5%;
  margin-bottom: 1.5%;
}
.child:nth-child(4n) {
  margin-right: 0;
}