ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್ ಮ್ಯಾಸನ್ರಿ: Pinterest ಶೈಲಿಯ ಲೇಔಟ್ ಅನುಷ್ಠಾನದ ಆಳವಾದ ಅಧ್ಯಯನ

ವರ್ಷಗಳಿಂದ, Pinterest ನಿಂದ ಜನಪ್ರಿಯಗೊಂಡ 'ಮ್ಯಾಸನ್ರಿ' ಲೇಔಟ್ ಆಧುನಿಕ ವೆಬ್ ವಿನ್ಯಾಸದ ಒಂದು ಪ್ರಮುಖ ಭಾಗವಾಗಿದೆ. ಅದರ ವಿಶಿಷ್ಟ 'ವಾಟರ್‌ಫಾಲ್' ಪರಿಣಾಮ, ಇದರಲ್ಲಿ ವಿಭಿನ್ನ ಎತ್ತರದ ಐಟಂಗಳು ಗೋಡೆಯಲ್ಲಿ ಇಟ್ಟಿಗೆಗಳಂತೆ ಅಚ್ಚುಕಟ್ಟಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ, ಇದು ಸೌಂದರ್ಯಾತ್ಮಕವಾಗಿ ಆಕರ್ಷಕ ಮತ್ತು ವಿಷಯವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ. ಆದಾಗ್ಯೂ, ಈ ಸರಳವಾಗಿ ಕಾಣುವ ಲೇಔಟನ್ನು ದೃಢವಾದ, ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯೊಂದಿಗೆ ಸಾಧಿಸುವುದು ಐತಿಹಾಸಿಕವಾಗಿ ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಒಂದು ದೊಡ್ಡ ಸವಾಲಾಗಿತ್ತು, ಮತ್ತು ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಗಳ ಮೇಲೆ ಹೆಚ್ಚು ಅವಲಂಬಿತವಾಗಿತ್ತು.

ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್‌ನ ಆಗಮನವು ವೆಬ್ ಲೇಔಟ್‌ಗಳ ಬಗ್ಗೆ ನಾವು ಯೋಚಿಸುವ ರೀತಿಯನ್ನು ಕ್ರಾಂತಿಗೊಳಿಸಿತು, ಆದರೆ ನಿಜವಾದ, ನೇಟಿವ್ ಮ್ಯಾಸನ್ರಿ ಪರಿಹಾರವು ಇನ್ನೂ ಕೈಗೆಟುಕಿರಲಿಲ್ಲ. ಆದರೆ, ಈಗ ಅದು ಬದಲಾಗುತ್ತಿದೆ. ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್ ಲೇಔಟ್ ಮಾಡ್ಯೂಲ್ ಲೆವೆಲ್ 3 ನಿರ್ದಿಷ್ಟಪಡಿಸುವಿಕೆಯಲ್ಲಿ grid-template-rows: masonry ಪರಿಚಯಿಸುವುದರೊಂದಿಗೆ, ಆಟವು ಬದಲಾಗುತ್ತಿದೆ. ಈ ಲೇಖನವು ಜಾಗತಿಕ ಡೆವಲಪರ್‌ಗಳಿಗಾಗಿ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಮ್ಯಾಸನ್ರಿ ಲೇಔಟ್‌ಗಳ ವಿಕಾಸವನ್ನು, ಕ್ಲಾಸಿಕ್ ಪರಿಹಾರಗಳಿಂದ ಹಿಡಿದು ಅತ್ಯಾಧುನಿಕ ನೇಟಿವ್ ಸಿಎಸ್‌ಎಸ್ ಅನುಷ್ಠಾನದವರೆಗೆ ನಿಮ್ಮನ್ನು ಕರೆದೊಯ್ಯುತ್ತದೆ ಮತ್ತು ಪ್ರಗತಿಶೀಲ ಸುಧಾರಣೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಪ್ರಾಯೋಗಿಕ, ಪ್ರೊಡಕ್ಷನ್‌ಗೆ ಸಿದ್ಧವಾದ ತಂತ್ರವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಮ್ಯಾಸನ್ರಿ ಲೇಔಟ್ ಎಂದರೇನು?

ನಾವು ಕೋಡ್‌ಗೆ ಧುಮುಕುವ ಮೊದಲು, ಒಂದು ಸ್ಪಷ್ಟ, ಸಾಮಾನ್ಯ ತಿಳುವಳಿಕೆಯನ್ನು ಸ್ಥಾಪಿಸೋಣ. ಮ್ಯಾಸನ್ರಿ ಲೇಔಟ್ ಒಂದು ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯಾಗಿದ್ದು, ಇದರಲ್ಲಿ ಐಟಂಗಳನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸಲಾಗುತ್ತದೆ, ಹಿಂದಿನ ಸಾಲಿನಲ್ಲಿರುವ ಚಿಕ್ಕ ಐಟಂಗಳಿಂದ ಉಳಿದ ಜಾಗವನ್ನು ತುಂಬುತ್ತದೆ. ಕಟ್ಟುನಿಟ್ಟಾದ ಗ್ರಿಡ್‌ನಲ್ಲಿರುವಂತೆ ಒಂದು ಸಾಲಿನಲ್ಲಿರುವ ಎಲ್ಲಾ ಐಟಂಗಳು ಅಡ್ಡಲಾಗಿ ಒಂದೇ ರೇಖೆಯಲ್ಲಿರಬೇಕೆಂದಿಲ್ಲ, ಮ್ಯಾಸನ್ರಿ ಲಂಬ ಜಾಗವನ್ನು ಉತ್ತಮಗೊಳಿಸುತ್ತದೆ. ಇದರ ಪರಿಣಾಮವಾಗಿ, ಅಡಚಣೆಯಿಲ್ಲದ, ಅಂತರವಿಲ್ಲದ ವ್ಯವಸ್ಥೆಯು ಉಂಟಾಗುತ್ತದೆ, ಇದು ಅನಗತ್ಯ ಬಿಳಿ ಜಾಗಗಳನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಡೈನಾಮಿಕ್ ದೃಶ್ಯ ಹರಿವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

ಪ್ರಮುಖ ಗುಣಲಕ್ಷಣಗಳು:

• ಐಟಂಗಳು ಸ್ಥಿರ ಕಾಲಮ್ ಅಗಲವನ್ನು ಹೊಂದಿದ್ದು, ಬದಲಾಗುವ ಎತ್ತರವನ್ನು ಹೊಂದಿರುತ್ತವೆ.
• ಐಟಂಗಳನ್ನು ಲಂಬ ಕಾಲಮ್‌ಗಳಲ್ಲಿ ಜೋಡಿಸಲಾಗುತ್ತದೆ.
• ಸ್ಥಿರವಾದ ಸಾಲು ಎತ್ತರ ಇರುವುದಿಲ್ಲ; ಐಟಂಗಳು ಲಭ್ಯವಿರುವ ಜಾಗವನ್ನು ತುಂಬಲು ಹರಿಯುತ್ತವೆ.
• ಕಂಟೇನರ್‌ನ ಒಟ್ಟಾರೆ ಎತ್ತರವನ್ನು ಕಡಿಮೆ ಮಾಡಲಾಗುತ್ತದೆ.

ಈ ಲೇಔಟ್ ಇಮೇಜ್ ಗ್ಯಾಲರಿಗಳು, ಪೋರ್ಟ್‌ಫೋಲಿಯೋಗಳು, ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಫೀಡ್‌ಗಳು ಮತ್ತು ಯಾವುದೇ ವಿಷಯ-ಭರಿತ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಳಿಗೆ ಸೂಕ್ತವಾಗಿದೆ, ಅಲ್ಲಿ ಐಟಂಗಳ ಲಂಬ ಆಯಾಮವು ಅನಿರೀಕ್ಷಿತವಾಗಿರುತ್ತದೆ.

ಐತಿಹಾಸಿಕ ವಿಧಾನ: ಮಲ್ಟಿ-ಕಾಲಮ್ ಲೇಔಟ್ ("ಹ್ಯಾಕ್")

ದೀರ್ಘಕಾಲದವರೆಗೆ, ಶುದ್ಧ ಸಿಎಸ್‌ಎಸ್ ಮ್ಯಾಸನ್ರಿ ಲೇಔಟ್‌ಗೆ ನಾವು ತಲುಪಬಹುದಾದ ಹತ್ತಿರದ ವಿಧಾನವೆಂದರೆ ಸಿಎಸ್‌ಎಸ್ ಮಲ್ಟಿ-ಕಾಲಮ್ ಲೇಔಟ್ ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಬಳಸುವುದು. ಈ ತಂತ್ರವು column-count ಮತ್ತು column-gap ನಂತಹ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಮಲ್ಟಿ-ಕಾಲಮ್ ವಿಧಾನವು ನಿಮ್ಮ ಐಟಂಗಳ ಕಂಟೇನರ್ ಅನ್ನು ಒಂದೇ ಪಠ್ಯದ ಬ್ಲಾಕ್‌ನಂತೆ ಪರಿಗಣಿಸುತ್ತದೆ ಮತ್ತು ನಂತರ ಅದನ್ನು ಹಲವಾರು ಕಾಲಮ್‌ಗಳಾಗಿ ವಿಭಜಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ HTML ರಚನೆ:

            <div class="multicolumn-container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <!-- more items -->
</div>
            

              
                Copy
              
            
          

ಉದಾಹರಣೆ CSS:

            .multicolumn-container {
  column-count: 3;
  column-gap: 1em;
}

.item {
  display: inline-block; /* Or block, depending on context */
  width: 100%;
  margin-bottom: 1em;
  break-inside: avoid; /* Prevents items from breaking across columns */
}
            

              
                Copy
              
            
          

ಅನುಕೂಲಗಳು ಮತ್ತು ಅನಾನುಕೂಲಗಳು

ಅನುಕೂಲಗಳು:

• ಸರಳತೆ: ಕೇವಲ ಕೆಲವು ಸಾಲುಗಳ ಸಿಎಸ್‌ಎಸ್ ಮೂಲಕ ಇದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಅತ್ಯಂತ ಸುಲಭ.
• ಅತ್ಯುತ್ತಮ ಬ್ರೌಸರ್ ಬೆಂಬಲ: ಮಲ್ಟಿ-ಕಾಲಮ್ ಮಾಡ್ಯೂಲ್ ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಿಂದ ಬೆಂಬಲಿತವಾಗಿದೆ, ಇದು ಇದನ್ನು ಒಂದು ವಿಶ್ವಾಸಾರ್ಹ ಆಯ್ಕೆಯನ್ನಾಗಿ ಮಾಡುತ್ತದೆ.

ಅನಾನುಕೂಲಗಳು:

• ಐಟಂಗಳ ಕ್ರಮ: ಇದು ಅತಿದೊಡ್ಡ ಅನಾನುಕೂಲ. ವಿಷಯವು ಮೊದಲ ಕಾಲಮ್‌ನ ಮೇಲಿನಿಂದ ಅದರ ಕೆಳಭಾಗಕ್ಕೆ ಹರಿಯುತ್ತದೆ, ನಂತರ ಎರಡನೇ ಕಾಲಮ್‌ನ ಮೇಲಿನಿಂದ ಮುಂದುವರಿಯುತ್ತದೆ. ಇದರರ್ಥ ನಿಮ್ಮ ಐಟಂಗಳನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸಲಾಗುತ್ತದೆ, ಅಡ್ಡಲಾಗಿ ಅಲ್ಲ. ಐಟಂ 1 ಕಾಲಮ್ 1 ರಲ್ಲಿರಬಹುದು, ಐಟಂ 2 ಅದರ ಕೆಳಗೆ, ಆದರೆ ಐಟಂ 4 ಕಾಲಮ್ 2 ರ ಮೇಲ್ಭಾಗದಲ್ಲಿರಬಹುದು. ಕಾಲಾನುಕ್ರಮದ ಫೀಡ್‌ಗಳು ಅಥವಾ ಶ್ರೇಣೀಕೃತ ವಿಷಯಕ್ಕಾಗಿ ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಬಯಸಿದ ಬಳಕೆದಾರ ಅನುಭವವಲ್ಲ.
• ವಿಷಯ ವಿಭಜನೆ: break-inside: avoid; ಪ್ರಾಪರ್ಟಿ ನಿರ್ಣಾಯಕವಾಗಿದ್ದರೂ, ಇದು ಸಂಪೂರ್ಣವಾಗಿ ದೋಷರಹಿತವಲ್ಲ. ಕೆಲವು ಸಂಕೀರ್ಣ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ, ಒಂದು ಐಟಂನ ವಿಷಯವು ಇನ್ನೂ ಎರಡು ಕಾಲಮ್‌ಗಳ ನಡುವೆ ವಿಭಜನೆಯಾಗಬಹುದು, ಇದು ಅತ್ಯಂತ ಅನಪೇಕ್ಷಿತವಾಗಿದೆ.
• ಸೀಮಿತ ನಿಯಂತ್ರಣ: ಇದು ಪ್ರತ್ಯೇಕ ಐಟಂಗಳ ನಿಖರವಾದ ಸ್ಥಾನದ ಮೇಲೆ ಬಹಳ ಕಡಿಮೆ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ, ಇದು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಲೇಔಟ್‌ಗಳಿಗೆ ಸೂಕ್ತವಲ್ಲ.

ಒಂದು ಬುದ್ಧಿವಂತ ಪರಿಹಾರವಾಗಿದ್ದರೂ, ಮಲ್ಟಿ-ಕಾಲಮ್ ವಿಧಾನವು ಮೂಲಭೂತವಾಗಿ ನಿಜವಾದ ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯಲ್ಲ ಮತ್ತು ಅನೇಕ ಆಧುನಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಇದು ಸಾಕಾಗುವುದಿಲ್ಲ.

ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್ ಯುಗ: ರೋ ಸ್ಪ್ಯಾನಿಂಗ್‌ನೊಂದಿಗೆ "ಫಾಕ್ಸ್" ಮ್ಯಾಸನ್ರಿ

ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್‌ನ ಆಗಮನದೊಂದಿಗೆ, ಡೆವಲಪರ್‌ಗಳು ತಕ್ಷಣವೇ ಮ್ಯಾಸನ್ರಿ ಪರಿಣಾಮವನ್ನು ಪುನರಾವರ್ತಿಸಲು ಪ್ರಯತ್ನಿಸಿದರು. ಗ್ರಿಡ್ ಎರಡು-ಆಯಾಮದ ಲೇಔಟ್‌ಗಳಲ್ಲಿ ಉತ್ತಮವಾಗಿದ್ದರೂ, ಐಟಂಗಳು ಊಹಿಸಬಹುದಾದ ಸಾಲುಗಳು ಮತ್ತು ಕಾಲಮ್‌ಗಳ ಗ್ರಿಡ್‌ಗೆ ಹೊಂದಿಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ. ನಿಜವಾದ ಮ್ಯಾಸನ್ರಿ ಈ ನಿಯಮವನ್ನು ಮುರಿಯುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್‌ನ ಸ್ಪ್ಯಾನಿಂಗ್ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಬಳಸಿ ಪರಿಣಾಮವನ್ನು ಅನುಕರಿಸುವ ಒಂದು ಚತುರ ತಂತ್ರವು ಹೊರಹೊಮ್ಮಿತು.

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಈ ವಿಧಾನವು ಅನೇಕ ಸಣ್ಣ, ಸ್ಥಿರ-ಎತ್ತರದ ಸಾಲುಗಳೊಂದಿಗೆ ಒಂದು ಪ್ರಮಾಣಿತ ಗ್ರಿಡ್ ಅನ್ನು ಸ್ಥಾಪಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ನಂತರ ಪ್ರತಿಯೊಂದು ಗ್ರಿಡ್ ಐಟಂಗೆ ಅದರ ವಿಷಯದ ಎತ್ತರವನ್ನು ಆಧರಿಸಿ ನಿರ್ದಿಷ್ಟ ಸಂಖ್ಯೆಯ ಸಾಲುಗಳನ್ನು ವ್ಯಾಪಿಸಲು ಸೂಚಿಸಲಾಗುತ್ತದೆ. ಪ್ರತಿ ಐಟಂಗೆ ಅಗತ್ಯವಾದ ಸ್ಪ್ಯಾನ್ ಅನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಇದಕ್ಕೆ ಸ್ವಲ್ಪ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬೇಕಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ CSS:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1em;
  grid-auto-rows: 20px; /* Define a small, fixed row height */
}

.item {
  /* JavaScript will add 'grid-row-end' here */
}
            

              
                Copy
              
            
          

ಉದಾಹರಣೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ (ಪರಿಕಲ್ಪನಾತ್ಮಕ):

            const grid = document.querySelector('.grid-container');
const items = document.querySelectorAll('.item');
const rowHeight = 20; // Must match grid-auto-rows in CSS
const rowGap = 16; // 1em, assuming 16px base font size

items.forEach(item => {
  const contentHeight = item.querySelector('.content').offsetHeight;
  const rowSpan = Math.ceil((contentHeight + rowGap) / (rowHeight + rowGap));
  item.style.gridRowEnd = `span ${rowSpan}`;
});
            

              
                Copy
              
            
          

ಅನುಕೂಲಗಳು ಮತ್ತು ಅನಾನುಕೂಲಗಳು

ಅನುಕೂಲಗಳು:

• ಸರಿಯಾದ ಐಟಂ ಕ್ರಮ: ಮಲ್ಟಿ-ಕಾಲಮ್‌ಗೆ ಭಿನ್ನವಾಗಿ, ಐಟಂಗಳನ್ನು ಎಡದಿಂದ ಬಲಕ್ಕೆ, ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ ಸರಿಯಾದ ಕ್ರಮದಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ.
• ಶಕ್ತಿಯುತ ಗ್ರಿಡ್ ವೈಶಿಷ್ಟ್ಯಗಳು: ನೀವು ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್‌ನ ಎಲ್ಲಾ ಶಕ್ತಿಯನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು, ಇದರಲ್ಲಿ ಅಲೈನ್‌ಮೆಂಟ್, ಗ್ಯಾಪ್‌ಗಳು, ಮತ್ತು minmax() ನೊಂದಿಗೆ ರೆಸ್ಪಾನ್ಸಿವ್ ಕಾಲಮ್ ವ್ಯಾಖ್ಯಾನಗಳು ಸೇರಿವೆ.

ಅನಾನುಕೂಲಗಳು:

• ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅವಲಂಬನೆ: ಇದು ಶುದ್ಧ ಸಿಎಸ್‌ಎಸ್ ಪರಿಹಾರವಲ್ಲ. ಎತ್ತರಗಳನ್ನು ಅಳೆಯಲು ಮತ್ತು ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ವಿಷಯ (ವಿಶೇಷವಾಗಿ ಚಿತ್ರಗಳು) ಲೋಡ್ ಆದ ನಂತರ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ರನ್ ಆಗಬೇಕಾಗುತ್ತದೆ. ಇದು ಆರಂಭಿಕ ಪುಟ ಲೋಡ್ ನಂತರ ವಿಷಯವನ್ನು ಮರುಹೊಂದಿಸಲು ಅಥವಾ ಜಿಗಿಯಲು ಕಾರಣವಾಗಬಹುದು.
• ಕಾರ್ಯಕ್ಷಮತೆಯ ಹೊರೆ: ಈ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ನಡೆಸುವುದು, ವಿಶೇಷವಾಗಿ ನೂರಾರು ಐಟಂಗಳನ್ನು ಹೊಂದಿರುವ ಪುಟಗಳಲ್ಲಿ, ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು. ವಿಂಡೋ ಮರುಗಾತ್ರಗೊಳಿಸಿದಾಗ ಇದನ್ನು ಮರು-ಲೆಕ್ಕಾಚಾರ ಮಾಡಬೇಕಾಗುತ್ತದೆ.
• ಸಂಕೀರ್ಣತೆ: ಇದನ್ನು ಸ್ಥಾಪಿಸಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಒಂದು ಸರಳ ಸಿಎಸ್‌ಎಸ್ ಪ್ರಾಪರ್ಟಿಗಿಂತ ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾಗಿದೆ.

ಈ ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್ + ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವಿಧಾನವು ಹಲವಾರು ವರ್ಷಗಳಿಂದ ಆಧುನಿಕ ಮ್ಯಾಸನ್ರಿ ಲೇಔಟ್‌ಗಳಿಗೆ ವಾಸ್ತವಿಕ ಮಾನದಂಡವಾಯಿತು, ಇದು ಸ್ಕ್ರಿಪ್ಟಿಂಗ್ ಮೇಲಿನ ಅವಲಂಬನೆಯ ಹೊರತಾಗಿಯೂ, ನಿಯಂತ್ರಣ ಮತ್ತು ಅಂತಿಮ ನೋಟದ ಅತ್ಯುತ್ತಮ ಸಮತೋಲನವನ್ನು ನೀಡಿತು.

ಭವಿಷ್ಯ ಈಗ ಇಲ್ಲಿದೆ: `grid-template-rows` ಜೊತೆಗೆ ನೇಟಿವ್ ಸಿಎಸ್‌ಎಸ್ ಮ್ಯಾಸನ್ರಿ

ಅನೇಕ ಡೆವಲಪರ್‌ಗಳು ಕಾಯುತ್ತಿದ್ದ ಕ್ಷಣ ಅಂತಿಮವಾಗಿ ಬರುತ್ತಿದೆ. ಸಿಎಸ್‌ಎಸ್ ವರ್ಕಿಂಗ್ ಗ್ರೂಪ್ ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್ ನಿರ್ದಿಷ್ಟಪಡಿಸುವಿಕೆಯೊಳಗೆ ನೇರವಾಗಿ ಮ್ಯಾಸನ್ರಿ ಲೇಔಟ್‌ಗಳನ್ನು ಸಾಧಿಸಲು ಒಂದು ನೇಟಿವ್ ಮಾರ್ಗವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದೆ. ಇದನ್ನು grid-template-rows ಅಥವಾ grid-template-columns ಪ್ರಾಪರ್ಟಿಗಾಗಿ masonry ಮೌಲ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು ಸಾಧಿಸಲಾಗುತ್ತದೆ.

`masonry` ಮೌಲ್ಯವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ನೀವು grid-template-rows: masonry; ಅನ್ನು ಹೊಂದಿಸಿದಾಗ, ನೀವು ಬ್ರೌಸರ್‌ನ ರೆಂಡರಿಂಗ್ ಇಂಜಿನ್‌ಗೆ ಐಟಂಗಳನ್ನು ಇರಿಸಲು ಬೇರೆ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಲು ಹೇಳುತ್ತಿದ್ದೀರಿ. ಕಟ್ಟುನಿಟ್ಟಾದ ಗ್ರಿಡ್ ಸಾಲಿಗೆ ಅಂಟಿಕೊಳ್ಳುವ ಬದಲು, ಐಟಂಗಳನ್ನು ಅತಿ ಹೆಚ್ಚು ಲಭ್ಯವಿರುವ ಸ್ಥಳವಿರುವ ಕಾಲಮ್‌ನಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ, ಇದು ಮ್ಯಾಸನ್ರಿಯ ವಿಶಿಷ್ಟ ಪ್ಯಾಕ್ಡ್ ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

ಪ್ರಸ್ತುತ ಬ್ರೌಸರ್ ಬೆಂಬಲ

ಪ್ರಮುಖ ಸೂಚನೆ: ಈ ಲೇಖನವನ್ನು ಬರೆಯುವ ಸಮಯದಲ್ಲಿ, ನೇಟಿವ್ ಸಿಎಸ್‌ಎಸ್ ಮ್ಯಾಸನ್ರಿ ಒಂದು ಪ್ರಾಯೋಗಿಕ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ. ಇದರ ಬೆಂಬಲ ಬಹಳ ಸೀಮಿತವಾಗಿದೆ. ಇದು ಭವಿಷ್ಯದ ತಂತ್ರಜ್ಞಾನವಾಗಿದೆ.

• ಫೈರ್‌ಫಾಕ್ಸ್: ಬೆಂಬಲಿತವಾಗಿದೆ, ಆದರೆ ಫೀಚರ್ ಫ್ಲ್ಯಾಗ್‌ನ ಹಿಂದಿದೆ. ಇದನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು, ನಿಮ್ಮ ಫೈರ್‌ಫಾಕ್ಸ್ ಬ್ರೌಸರ್‌ನಲ್ಲಿ about:config ಗೆ ಹೋಗಿ ಮತ್ತು layout.css.grid-template-masonry-value.enabled ಅನ್ನು true ಗೆ ಹೊಂದಿಸಿ.
• ಸಫಾರಿ: ಹಿಂದೆ ಸಫಾರಿ ಟೆಕ್ನಾಲಜಿ ಪ್ರಿವ್ಯೂನಲ್ಲಿ ಲಭ್ಯವಿತ್ತು ಆದರೆ ನಿರ್ದಿಷ್ಟಪಡಿಸುವಿಕೆಯ ನವೀಕರಣಗಳಿಗಾಗಿ ಅದನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ.
• ಕ್ರೋಮ್/ಎಡ್ಜ್: ಇನ್ನೂ ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗಿಲ್ಲ.

ಇತ್ತೀಚಿನ ಬೆಂಬಲ ಮಾಹಿತಿಗಾಗಿ CanIUse.com ನಂತಹ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಪರಿಶೀಲಿಸುವುದು ನಿರ್ಣಾಯಕ. ಬೆಂಬಲವು ವ್ಯಾಪಕವಾಗಿಲ್ಲದ ಕಾರಣ, ಈ ಪರಿಹಾರವನ್ನು ದೃಢವಾದ ಫಾಲ್‌ಬ್ಯಾಕ್ ತಂತ್ರವಿಲ್ಲದೆ ಪ್ರೊಡಕ್ಷನ್‌ನಲ್ಲಿ ಬಳಸಲಾಗುವುದಿಲ್ಲ.

ನೇಟಿವ್ ಸಿಎಸ್‌ಎಸ್ ಮ್ಯಾಸನ್ರಿ ಅನುಷ್ಠಾನಿಸುವುದು ಹೇಗೆ

ಅನುಷ್ಠಾನವು ಸುಂದರವಾಗಿ ಸರಳವಾಗಿದೆ. ಇದೇ ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಅಷ್ಟು ರೋಮಾಂಚನಕಾರಿಯಾಗಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ CSS:

            .masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-template-rows: masonry;
  gap: 1em; /* 'gap' is the modern shorthand for grid-gap */
  align-items: start; /* Ensures items start at the top of their track */
}
            

              
                Copy
              
            
          

ಅಷ್ಟೇ. ಈ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ವಿಶ್ಲೇಷಿಸೋಣ:

• display: grid;: ಅತ್ಯಗತ್ಯವಾದ ಆರಂಭಿಕ ಹಂತ.
• grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));: ಇದು ಒಂದು ಕ್ಲಾಸಿಕ್ ರೆಸ್ಪಾನ್ಸಿವ್ ಗ್ರಿಡ್ ಸೆಟಪ್. ಇದು ಬ್ರೌಸರ್‌ಗೆ ಸಾಧ್ಯವಾದಷ್ಟು ಕಾಲಮ್‌ಗಳನ್ನು ರಚಿಸಲು ಹೇಳುತ್ತದೆ, ಪ್ರತಿ ಕಾಲಮ್ ಕನಿಷ್ಠ 250px ಅಗಲವಿದ್ದು, ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಜಾಗವನ್ನು ತುಂಬಲು ಬೆಳೆಯುತ್ತದೆ.
• grid-template-rows: masonry;: ಇದು ಮಾಂತ್ರಿಕ ಪ್ರಾಪರ್ಟಿ. ಇದು ಸಾಲು ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ಪ್ರಮಾಣಿತ ಗ್ರಿಡ್‌ನಿಂದ ಮ್ಯಾಸನ್ರಿಗೆ ಬದಲಾಯಿಸುತ್ತದೆ.
• gap: 1em;: ಎಲ್ಲಾ ಗ್ರಿಡ್ ಐಟಂಗಳ ನಡುವಿನ ಅಂತರವನ್ನು, ಅಡ್ಡಲಾಗಿ ಮತ್ತು ಲಂಬವಾಗಿ, ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
• align-items: start;: ಇದು ಐಟಂಗಳನ್ನು ಅವುಗಳ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ನ ಆರಂಭಕ್ಕೆ ಜೋಡಿಸುತ್ತದೆ. ಲಂಬ ಮ್ಯಾಸನ್ರಿ ಲೇಔಟ್‌ಗಾಗಿ, ಇದು ಡೀಫಾಲ್ಟ್ ನಡವಳಿಕೆಯಾಗಿದೆ, ಆದರೆ ಸ್ಪಷ್ಟವಾಗಿರುವುದು ಉತ್ತಮ ಅಭ್ಯಾಸ.

ಈ ಕೋಡ್‌ನೊಂದಿಗೆ, ಬ್ರೌಸರ್ ಐಟಂಗಳನ್ನು ಇರಿಸಲು ಎಲ್ಲಾ ಸಂಕೀರ್ಣ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ನಿಭಾಯಿಸುತ್ತದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಲ್ಲ, ರಿಫ್ಲೋಗಳಿಲ್ಲ, ಕೇವಲ ಶುದ್ಧ, ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ಸಿಎಸ್‌ಎಸ್.

ಪ್ರೊಡಕ್ಷನ್‌ಗೆ ಸಿದ್ಧವಾದ ತಂತ್ರ: ಪ್ರೊಗ್ರೆಸಿವ್ ಎನ್ಹಾನ್ಸ್‌ಮೆಂಟ್

ನೇಟಿವ್ ಸಿಎಸ್‌ಎಸ್ ಮ್ಯಾಸನ್ರಿಗೆ ಪ್ರಸ್ತುತ ಸಾರ್ವತ್ರಿಕ ಬ್ರೌಸರ್ ಬೆಂಬಲದ ಕೊರತೆಯನ್ನು ಗಮನಿಸಿದರೆ, ನಾವು ಅದನ್ನು ಸರಳವಾಗಿ ಬಳಸಿ ಎಲ್ಲವೂ ಸರಿಯಾಗುವುದೆಂದು ಭಾವಿಸಲಾಗುವುದಿಲ್ಲ. ನಮಗೆ ಹೆಚ್ಚಿನ ಬಳಕೆದಾರರಿಗೆ ಉತ್ತಮ ಅನುಭವವನ್ನು ನೀಡುವ ವೃತ್ತಿಪರ ತಂತ್ರದ ಅಗತ್ಯವಿದೆ. ಉತ್ತರವೆಂದರೆ ಪ್ರೊಗ್ರೆಸಿವ್ ಎನ್ಹಾನ್ಸ್‌ಮೆಂಟ್.

ನಮ್ಮ ತಂತ್ರವು ಹೀಗಿರುತ್ತದೆ:

1. ಅದನ್ನು ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಆಧುನಿಕ, ನೇಟಿವ್ ಸಿಎಸ್‌ಎಸ್ ಮ್ಯಾಸನ್ರಿ ಬಳಸಿ.
2. ಇತರ ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್ + ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸ್ಪ್ಯಾನಿಂಗ್ ತಂತ್ರವನ್ನು ಬಳಸಿಕೊಂಡು ದೃಢವಾದ ಫಾಲ್‌ಬ್ಯಾಕ್ ಒದಗಿಸಿ.

ಹಂತ 1: ಬೇಸ್ ಸಿಎಸ್‌ಎಸ್ (ಫಾಲ್‌ಬ್ಯಾಕ್)

ನಾವು ನಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಚಾಲಿತ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಾಗಿ ಸಿಎಸ್‌ಎಸ್ ಬರೆಯುವುದರೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸುತ್ತೇವೆ. ಇದು ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳು ಆರಂಭದಲ್ಲಿ ಪಡೆಯುವ ಕೋಡ್ ಆಗಿರುತ್ತದೆ.

            .masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1em;
  /* The small row height for our JS-based spanning calculation */
  grid-auto-rows: 10px;
}

.item {
  /* We add some basic styling for the items */
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 1em;
  box-sizing: border-box;
}
            

              
                Copy
              
            
          

ಹಂತ 2: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಾಲ್‌ಬ್ಯಾಕ್

ಮುಂದೆ, ನಾವು ಫಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ಚಾಲನೆ ಮಾಡುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬರೆಯುತ್ತೇವೆ. ಈ ಸ್ಕ್ರಿಪ್ಟ್ ನೇಟಿವ್ ಸಿಎಸ್‌ಎಸ್ ಪರಿಹಾರ ಲಭ್ಯವಿಲ್ಲದಿದ್ದರೆ ಮಾತ್ರ ರನ್ ಆಗುತ್ತದೆ.

            // Wait until the DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => {
  // Check if the browser supports 'grid-template-rows: masonry'
  const isMasonrySupported = CSS.supports('grid-template-rows', 'masonry');

  if (!isMasonrySupported) {
    console.log("Browser does not support native CSS Masonry. Applying JS fallback.");
    applyMasonryFallback();

    // Optional: Re-run on window resize
    window.addEventListener('resize', debounce(applyMasonryFallback, 150));
  }
});

function applyMasonryFallback() {
  const container = document.querySelector('.masonry-container');
  if (!container) return;

  // Get all direct children of the container
  const items = container.children;

  // Define grid properties (should match your CSS)
  const rowHeight = 10; 
  const rowGap = 16; // Assuming 1em = 16px

  for (let item of items) {
    item.style.gridRowEnd = 'auto'; // Reset previous spans
    const itemHeight = item.offsetHeight;
    const rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap));
    item.style.gridRowEnd = `span ${rowSpan}`;
  }
}

// Debounce function to limit how often a function can run
function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}
            

              
                Copy
              
            
          

ಹಂತ 3: `@supports` ನೊಂದಿಗೆ ಸುಧಾರಣೆ

ಅಂತಿಮವಾಗಿ, ನಾವು ಸಿಎಸ್‌ಎಸ್ @supports at-rule ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ಇದು ಒಂದು ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು, ಬ್ರೌಸರ್ ನಿರ್ದಿಷ್ಟ ಸಿಎಸ್‌ಎಸ್ ಪ್ರಾಪರ್ಟಿ-ಮೌಲ್ಯ ಜೋಡಿಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡರೆ ಮಾತ್ರ ಸಿಎಸ್‌ಎಸ್ ನಿಯಮಗಳನ್ನು ಅನ್ವಯಿಸಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದೇ ನಮ್ಮ ಪ್ರೊಗ್ರೆಸಿವ್ ಎನ್ಹಾನ್ಸ್‌ಮೆಂಟ್‌ನ ತಿರುಳು.

ನಾವು ಇದನ್ನು ನಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗೆ ಸೇರಿಸುತ್ತೇವೆ:

            /* Apply these rules ONLY if the browser supports native Masonry */
@supports (grid-template-rows: masonry) {
  .masonry-container {
    /* Override the fallback grid-auto-rows */
    grid-template-rows: masonry;
    grid-auto-rows: unset; /* Or 'auto', to be clean */
  }
}
            

              
                Copy
              
            
          

ಇದೆಲ್ಲವೂ ಹೇಗೆ ಒಟ್ಟಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

1. ಆಧುನಿಕ ಬ್ರೌಸರ್ (ಫ್ಲ್ಯಾಗ್ ಮಾಡಿದ ಫೈರ್‌ಫಾಕ್ಸ್‌ನಂತೆ): ಬ್ರೌಸರ್ ಸಿಎಸ್‌ಎಸ್ ಅನ್ನು ಓದುತ್ತದೆ. ಅದು grid-template-rows: masonry ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತದೆ. @supports ಬ್ಲಾಕ್ ಅನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ, ಇದು grid-auto-rows ಅನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ ಮತ್ತು ನೇಟಿವ್, ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ಮ್ಯಾಸನ್ರಿ ಲೇಔಟ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ನಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ CSS.supports() ಅನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ, ಅದು true ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಫಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್ ಎಂದಿಗೂ ರನ್ ಆಗುವುದಿಲ್ಲ. ಬಳಕೆದಾರರಿಗೆ ಸಾಧ್ಯವಾದಷ್ಟು ಉತ್ತಮ ಅನುಭವ ಸಿಗುತ್ತದೆ.
2. ಒಂದು ಪ್ರಮಾಣಿತ ಬ್ರೌಸರ್ (ಕ್ರೋಮ್‌ನಂತೆ): ಬ್ರೌಸರ್ ಸಿಎಸ್‌ಎಸ್ ಅನ್ನು ಓದುತ್ತದೆ. ಅದು grid-template-rows: masonry ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದಿಲ್ಲ, ಆದ್ದರಿಂದ ಅದು @supports ಬ್ಲಾಕ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ. ಇದು grid-auto-rows: 10px ಸೇರಿದಂತೆ ಬೇಸ್ ಸಿಎಸ್‌ಎಸ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. ನಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ CSS.supports() ಅನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ, ಅದು false ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. applyMasonryFallback() ಫಂಕ್ಷನ್ ಅನ್ನು ಪ್ರಚೋದಿಸಲಾಗುತ್ತದೆ, ಇದು ಸಾಲು ಸ್ಪ್ಯಾನ್‌ಗಳನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅವುಗಳನ್ನು ಗ್ರಿಡ್ ಐಟಂಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ. ಬಳಕೆದಾರರಿಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಿಂದ ಚಾಲಿತವಾದ ಸಂಪೂರ್ಣವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಮ್ಯಾಸನ್ರಿ ಲೇಔಟ್ ಸಿಗುತ್ತದೆ.

ಈ ವಿಧಾನವು ದೃಢವಾದದ್ದು, ಭವಿಷ್ಯ-ನಿರೋಧಕವಾಗಿದೆ ಮತ್ತು ಪ್ರತಿಯೊಬ್ಬರಿಗೂ ಅವರ ಬ್ರೌಸರ್ ತಂತ್ರಜ್ಞಾನವನ್ನು ಲೆಕ್ಕಿಸದೆ ಉತ್ತಮ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಹೆಚ್ಚು ಬ್ರೌಸರ್‌ಗಳು ನೇಟಿವ್ ಮ್ಯಾಸನ್ರಿಯನ್ನು ಅಳವಡಿಸಿಕೊಂಡಂತೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ಸರಳವಾಗಿ ಕಡಿಮೆ ಮತ್ತು ಕಡಿಮೆ ಬಳಸಲ್ಪಡುತ್ತದೆ, ಕೋಡ್‌ಗೆ ಯಾವುದೇ ಬದಲಾವಣೆಗಳ ಅಗತ್ಯವಿಲ್ಲ.

ತೀರ್ಮಾನ: ಭವಿಷ್ಯಕ್ಕಾಗಿ ನಿರ್ಮಾಣ

ಸಿಎಸ್‌ಎಸ್‌ನಲ್ಲಿ ಸರಳ, ಘೋಷಣಾತ್ಮಕ ಮ್ಯಾಸನ್ರಿ ಲೇಔಟ್‌ಗಾಗಿ ಪ್ರಯಾಣವು ದೀರ್ಘವಾಗಿದೆ, ಆದರೆ ನಾವು ಒಂದು ದೊಡ್ಡ ಪ್ರಗತಿಯ ಅಂಚಿನಲ್ಲಿದ್ದೇವೆ. grid-template-rows: masonry ಇನ್ನೂ ಅದರ ಪ್ರಾಯೋಗಿಕ ಹಂತದಲ್ಲಿದ್ದರೂ, ಇದು ವೆಬ್ ಲೇಔಟ್ ಸಾಮರ್ಥ್ಯಗಳಿಗೆ ಒಂದು ಮಹತ್ವದ ಜಿಗಿತವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.

ಪ್ರಪಂಚದಾದ್ಯಂತದ ಡೆವಲಪರ್‌ಗಳಿಗೆ, ಪ್ರಮುಖ ಪಾಠವೆಂದರೆ ಭವಿಷ್ಯವನ್ನು ಗಮನದಲ್ಲಿಟ್ಟುಕೊಂಡು ನಿರ್ಮಿಸುವುದು. ಪ್ರೊಗ್ರೆಸಿವ್ ಎನ್ಹಾನ್ಸ್‌ಮೆಂಟ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಇಂದು ಈ ಶಕ್ತಿಯುತ ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸಲು ಪ್ರಾರಂಭಿಸಬಹುದು. ನೀವು ಅತ್ಯಾಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿನ ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚಿನ ಕಾರ್ಯಕ್ಷಮತೆಯ, ನೇಟಿವ್ ಅನುಭವವನ್ನು ಒದಗಿಸಬಹುದು, ಹಾಗೆಯೇ ಉತ್ತಮವಾಗಿ ರಚಿಸಲಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ಮೂಲಕ ಎಲ್ಲರಿಗೂ ದೃಢವಾದ, ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಒಂದೇ ರೀತಿಯ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು.

ಮೂಲಭೂತ ಲೇಔಟ್ ಮಾದರಿಗಳಿಗಾಗಿ ಭಾರವಾದ, ಮೂರನೇ-ಪಕ್ಷದ ಲೈಬ್ರರಿಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗುವ ದಿನಗಳು ಎಣಿಸಲ್ಪಟ್ಟಿವೆ. ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್, ಸ್ಪ್ಯಾನಿಂಗ್, ಮತ್ತು ಹೊಸ masonry ಮೌಲ್ಯದ ತತ್ವಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಮುಂದಿನ ಪೀಳಿಗೆಯ ಸುಂದರ, ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ವೆಬ್ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸುಸಜ್ಜಿತರಾಗಿದ್ದೀರಿ.