ಕೆಲವು ವರ್ಷಗಳ ಹಿಂದೆ, ನಾನು ಒಂದು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ನಿರ್ಮಿಸಲು ಕುಳಿತೆ. ಯಾವುದೇ ವಿಚಿತ್ರವಿಲ್ಲದ—ಕೇವಲ ಒಂದು ಫಿಕ್ಸೆಡ್ ಸೈಡ್‌ಬಾರ್, ಮುಖ್ಯ ಕಂಟೆಂಟ್ ಏರಿಯಾ ಮತ್ತು ಫೂಟರ್. Flexbox ಅತ್ಯಂತ ಸೂಕ್ತ ಆಯ್ಕೆಯಂತೆ ಕಂಡಿತು, ಮತ್ತು ಆರಂಭದಲ್ಲಿ ಅದು ಸರಿಯಾಗಿಯೇ ಕೆಲಸ ಮಾಡಿತು. ನಂತರ ನಾನು ಮುಖ್ಯ ವಿಭಾಗದಲ್ಲಿ ಒಂದು ಸಾಲು ಕಾರ್ಡ್‌ಗಳನ್ನು ಹಾಕಿದೆ. ಸಂಪೂರ್ಣ ಲೇಔಟ್ ಕುಸಿದುಹೋಯಿತು. ಮುಂದಿನ ಮೂರು ಗಂಟೆಗಳ ಕಾಲ ನಾನು flex-grow ಅನುಪಾತಗಳು ಮತ್ತು ನೆಸ್ಟೆಡ್ ಪರ್ಸೆಂಟ್েজ ವಿಡ್ತ್‌ಗಳೊಂದಿಗೆ ಹೋರಾಡುತ್ತಾ ಕಳೆದೆ; ನಾನು ಎಷ್ಟು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡಿದರೂ ಕಂಟೇನರ್‌ಗಳು ಸಾಲಾಗಿ ನಿಲ್ಲಲು ನಿರಾಕರಿಸಿದ್ದನ್ನು ನೋಡುತ್ತಾ ಕುಳಿತೆ. ಆ ಪುಟವು ಬಿದ್ದೇ ಹೋಗುವ ಗೋಪುರದಂತೆ ಭಾಸವಾಯಿತು.

ಆ ಕಠಿಣ ಅನುಭವವು ಆಧುನಿಕ CSS ಲೇಔಟ್ ಬಗ್ಗೆ ಅತ್ಯಂತ ಪ್ರಮುಖವಾದ ವಿಷಯವನ್ನು ನನಗೆ ಕಲಿಸಿತು: Flexbox ಮತ್ತು Grid ವಿರೋಧಿಗಳಲ್ಲ. ಅವು ಬೇರೆ ಬೇರೆ ಕೆಲಸಗಳಿಗಾಗಿ ಇರುವ ಸಾಧನಗಳು, ಮತ್ತು ಹೆಚ್ಚಿನ ವಿಫಲ ಲೇಔಟ್‌ಗಳು ತಪ್ಪು ಸಾಧನವನ್ನು ಬಳಸುವುದರಿಂದಲೇ ಉಂಟಾಗುತ್ತವೆ.

ವ್ಯತ್ಯಾಸವು ಆಯಾಮದಲ್ಲಿದೆ

Flexbox ಅನ್ನು ಒಂದು ಕಾರಿಡಾರ್ (hallway) ಎಂದು ಭಾವಿಸಿ. ವಸ್ತುಗಳು ಒಂದು ದಿಕ್ಕಿನಲ್ಲಿ, ಅಂದರೆ ಸಾಲು (row) ಅಥವಾ ಕಾಲಂ (column) ರೂಪದಲ್ಲಿ ಹರಿಯುತ್ತವೆ. ಇದು ಒಂದು-ಆಯಾಮದ (one-dimensional) ವಿತರಣೆಗಾಗಿ ನಿರ್ಮಿಸಲಾಗಿದೆ. ಬ್ರೌಸರ್ ಕಂಟೆಂಟ್ ಅನ್ನು ಗಮನಿಸುತ್ತದೆ, ನಂತರ ಅದನ್ನು ಆ ಒಂದೇ ಅಕ್ಷ (axis) বরাবর ಹೇಗೆ ಎಳೆಯಬೇಕು, ಕುಗ್ಗಿಸಬೇಕು ಅಥವಾ ಜೋಡಿಸಬೇಕು ಎಂದು ನಿರ್ಧರಿಸುತ್ತದೆ. ಕಂಟೆಂಟ್ ಲೇಔಟ್ ಅನ್ನು ನಿರ್ಧರಿಸುವ ಸಂದರ್ಭಗಳಲ್ಲಿ Flexbox ಅನ್ನು ಬಳಸಲು ಇದು ಪರಿಪೂರ್ಣವಾಗಿದೆ. ನಾವಿಗೇಷನ್ ಬಾರ್, ಫಾರ್ಮ್ ಫೀಲ್ಡ್‌ಗಳ ಸ್ಟ್ಯಾಕ್ ಅಥವಾ ಸಮಾನ ಅಂತರ ಬೇಕಾದ ಟ್ಯಾಗ್‌ಗಳ ಸೆಟ್—ಇವೆಲ್ಲವೂ ಒಂದೇ ತರ್ಕವನ್ನು ಹಂಚಿಕೊಳ್ಳುವುದರಿಂದ ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ ನೈಸರ್ಗಿಕವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ.

ಮತ್ತೊಂದೆಡೆ, Grid ಎಂಬುದು ಒಂದು ಫ್ಲೋರ್ ಪ್ಲಾನ್ (ನೆಲದ ನಕ್ಷೆ) ಇದ್ದಂತೆ. ಇದು ಕಟ್ಟುನಿಟ್ಟಾಗಿ ಎರಡು-ಆಯಾಮದ (two-dimensional) ಆಗಿದ್ದು, ಸಾಲುಗಳು ಮತ್ತು ಕಾಲಂಗಳನ್ನು ಏಕಕಾಲದಲ್ಲಿ ನಿರ್ವಹಿಸುತ್ತದೆ. ನೀವು ಮೊದಲು ರಚನೆಯನ್ನು (structure) ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೀರಿ, ನಂತರ ಅದರೊಳಗೆ ವಸ್ತುಗಳನ್ನು ಇರಿಸುತ್ತೀರಿ. ಇದು ಒಟ್ಟಾರೆ ಪೇಜ್ ಆರ್ಕಿಟೆಕ್ಚರ್‌ಗೆ—ಅಂದರೆ ನೀವು ಲಂಬ (vertical) ಮತ್ತು ಅಡ್ಡ (horizontal) ಸ್ಥಾನಗಳನ್ನು ಒಟ್ಟಿಗೆ ನಿಯಂತ್ರಿಸಬೇಕಾದ ಕಡೆಗೆ—Grid ಅನ್ನು ಆದರ್ಶವಾಗಿಸುತ್ತದೆ. ನೀವು ನೆಸ್ಟೆಡ್ Flexbox ಕಂಟೇನರ್‌ಗಳ ಮೂಲಕ ಸಂಕೀರ್ಣವಾದ ಎರಡು-ಆಯಾಮದ ವಿನ್ಯಾಸವನ್ನು ಹೇರಲು ಪ್ರಯತ್ನಿಸಿದಾಗ, ನೀವು ಅತಿಯಾದ ಮಾರ್ಕಪ್, ದುರ್ಬಲ ರ‍್ಯಾಪರ್‌ಗಳು ಮತ್ತು ಒಂದು ಹೆಚ್ಚುವರಿ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸಿದ ತಕ್ಷಣ ಹದಗೆಟ್ಟು ಹೋಗುವ ಸಂಕೀರ್ಣ ಗಣಿತದೊಂದಿಗೆ ಕೊನೆಗೊಳ್ಳುತ್ತೀರಿ.

Flexbox ಇಂದಿಗೂ ತನ್ನ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು ಉಳಿಸಿಕೊಂಡಿದೆ

ಪ್ರತಿಯೊಂದು flex ಕಂಟೇನರ್ ಅನ್ನು Grid ಮೂಲಕ ಬದಲಾಯಿಸಲು ಅವಸರ ಮಾಡಬೇಡಿ. ವೈಯಕ್ತಿಕ ಘಟಕಗಳ (individual components) ಒಳಗೆ, Flexbox ಹೆಚ್ಚಾಗಿ ಹೆಚ್ಚು ಸ್ಪಷ್ಟ ಮತ್ತು ಸರಳವಾಗಿರುತ್ತದೆ. ನಿಮ್ಮ ಬಳಿ ಎರಡು ಬಟನ್‌ಗಳಿರುವ ಕಾರ್ಡ್ ಫೂಟರ್ ಇದ್ದು, ಒಂದನ್ನು ಎಡಕ್ಕೆ ಮತ್ತು ಇನ್ನೊಂದನ್ನು ಬಲಕ್ಕೆ ಜೋಡಿಸಬೇಕೆಂದಿದ್ದರೆ, justify-content: space-between ನೀವು ಬಯಸಿದ್ದನ್ನು ನಿಖರವಾಗಿ ಮಾಡುತ್ತದೆ. ನಿಮಗೆ ಅರಿಯದ ಎತ್ತರವಿರುವ ಬಟನ್ ಒಳಗೆ ಐಕಾನ್ ಅನ್ನು ಲಂಬವಾಗಿ ಮಧ್ಯದಲ್ಲಿ ಜೋಡಿಸಬೇಕೆಂದಿದ್ದರೆ, align-items: center ಅತ್ಯಂತ ಸರಳವಾದ ಮಾರ್ಗವಾಗಿದೆ. ಬದಲಾಗುವ ಕಂಟೆಂಟ್—ಉದಾಹರಣೆಗೆ ವಿಭಿನ್ನ ಹೆಸರುಗಳ ಉದ್ದವಿರುವ ಬಳಕೆದಾರರ ಬ್ಯಾಡ್ಜ್‌ಗಳ ಸಾಲು—Flexbox ಒಳಗೆ ಸುಲಭವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ ಏಕೆಂದರೆ ಇದು ಕಂಟೆಂಟ್-ಫಸ್ಟ್ (content-first) ಆಗಿದೆ. ಕಂಟೇನರ್ ಅದು ಒಳಗೊಂಡಿರುವ ವಿಷಯಕ್ಕೆ ತಕ್ಕಂತೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ.

Grid ಎಂಬುದು ಕಂಟೇನರ್-ಫಸ್ಟ್ (container-first). ನೀವು ಬ್ರೌಸರ್ ಗೆ ಎಷ್ಟು ಟ್ರ್ಯಾಕ್‌ಗಳು ಇವೆ ಮತ್ತು ಅವು ಎಷ್ಟು ದೊಡ್ಡದಾಗಿರಬೇಕು ಎಂದು ತಿಳಿಸುತ್ತೀರಿ, ನಂತರ ಆ ಸೆಲ್‌ಗಳಲ್ಲಿ ವಸ್ತುಗಳನ್ನು ಹಾಕುತ್ತೀರಿ. ನಿಮ್ಮ ಲೇಔಟ್ ಕೇವಲ ಒಂದೇ ಸಾಲಿನಲ್ಲಿರುವ ಅಂಶಗಳಾಗಿದ್ದರೆ, Grid ಅನಗತ್ಯ ಸಂಕೀರ್ಣತೆಯನ್ನು ತರುತ್ತದೆ.

ಪೇಜ್ ಲೇಔಟ್‌ಗೆ Grid ಸೂಕ್ತ

ಇಲ್ಲಿ Grid ತನ್ನ ಪ್ರಾಬಲ್ಯವನ್ನು ತೋರಿಸುತ್ತದೆ. ನನ್ನ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ದುಸ್ವಪ್ನ ನೆನಪಿದೆಯೇ? ರಚನೆಯು ಮೊದಲಿನಿಂದಲೂ ಹೀಗಿರಬೇಕಿತ್ತು:

.page {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
}

.header { grid-row: 1; grid-column: 1 / -1; }
.sidebar { grid-row: 2; grid-column: 1; }
.main { grid-row: 2; grid-column: 2; }
.footer { grid-row: 3; grid-column: 1 / -1; }

ಏನಾಗುತ್ತಿದೆ ಎಂದು ನೋಡಿ. .page ಕಂಟೇನರ್ ಮೂರು ಸಾಲುಗಳು ಮತ್ತು ಎರಡು ಕಾಲಂಗಳನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ. auto ಕಾರಣದಿಂದಾಗಿ ಮೊದಲ ಸಾಲು ಹೆಡರ್‌ನಲ್ಲಿರುವ ವಿಷಯಕ್ಕೆ ತಕ್ಕಂತೆ ತನ್ನ ಗಾತ್ರವನ್ನು ಹೊಂದಿಸಿಕೊಳ್ಳುತ್ತದೆ. ಮಧ್ಯದ ಸಾಲು 1fr ಬಳಸಿ ಲಭ್ಯವಿರುವ ಉಳಿದ ಎಲ್ಲಾ ಜಾಗವನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ. ಫೂಟರ್ ಕೊನೆಯ ಸಾಲಿನಲ್ಲಿ ತನ್ನದೇ ಆದ ಕಂಟೆಂಟ್‌ಗೆ ತಕ್ಕಂತೆ ಇರುತ್ತದೆ. ಅದೇ ಸಮಯದಲ್ಲಿ, ಸೈಡ್‌ಬಾರ್ 200 ಪಿಕ್ಸೆಲ್ ಅಗಲಕ್ಕೆ ಸ್ಥಿರವಾಗಿರುತ್ತದೆ ಮತ್ತು ಮುಖ್ಯ ಪ್ರದೇಶವು ಉಳಿದ ಜಾಗವನ್ನು ತುಂಬುತ್ತದೆ.

ಸ್ಥಳದ ನಿರ್ಧರಿಸುವ ತರ್ಕವೇ (placement logic) ನಿಜವಾದ ಪರಿಹಾರ. ಹೆಡರ್ ಕಾಲಂ ಲೈನ್ 1 ರಿಂದ ಲೈನ್ -1 ವರೆಗೆ ವಿಸ್ತರಿಸುತ್ತದೆ, ಅಂದರೆ ನೀವು ನಂತರ ಎಷ್ಟು ಕಾಲಂಗಳನ್ನು ಸೇರಿಸಿದರೂ ಅದು ಎರಡೂ ಕಾಲಂಗಳಲ್ಲಿ ವಿಸ್ತರಿಸುತ್ತದೆ. ಸೈಡ್‌ಬಾರ್ ಮತ್ತು ಮುಖ್ಯ ಕಂಟೆಂಟ್ ಎರಡನೇ ಸಾಲನ್ನು ಹಂಚಿಕೊಳ್ಳುತ್ತವೆ ಆದರೆ ಪ್ರತ್ಯೇಕ ಕಾಲಂಗಳಲ್ಲಿ ಇರುತ್ತವೆ. ಫೂಟರ್ 3 ನೇ ಸಾಲಿನಲ್ಲಿ ಪೂರ್ಣ ಅಗಲಕ್ಕೆ ಬರುತ್ತದೆ. ನಿಮಗೆ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲೆ ಪರ್ಸೆಂಟ್ (%) ಗಣಿತದ ಅಗತ್ಯವಿಲ್ಲ. ಎತ್ತರಕ್ಕಾಗಿ ಹೋರಾಡುವ ನೆಸ್ಟೆ

ಮೊದಲನೆಯದು ಅಸಮರ್ಪಕವಾದ ಯುನಿಟ್ ಬಳಕೆ. ನೀವು grid-template-columns: 1fr 1fr 1fr ಎಂದು ವ್ಯಾಖ್ಯಾನಿಸಿದರೂ ಮತ್ತು ನಿಮ್ಮ ವಿನ್ಯಾಸಕ್ಕೆ ಕೇವಲ ಎರಡು ಕಾಲಮ್‌ಗಳ ಅಗತ್ಯವಿದ್ದರೂ, ಆ ಮೂರನೇ ಟ್ರ್ಯಾಕ್ ಇನ್ನೂ ಅಸ್ತಿತ್ವದಲ್ಲಿರುತ್ತದೆ. ಅದು ಖಾಲಿ ಉಳಿದು ನೀವು ನಿರೀಕ್ಷಿಸದ ಅಂತರವನ್ನು ಸೃಷ್ಟಿಸಬಹುದು, ಅಥವಾ ನಿಮ್ಮ ನಿಜವಾದ ಕಂಟೆಂಟ್ ಅನ್ನು ವಿನ್ಯಾಸವನ್ನು ಹಾಳುಮಾಡುವ ರೀತಿಯಲ್ಲಿ ಒತ್ತಡಕ್ಕೀಡು ಮಾಡಬಹುದು. ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿರಿ. ನಿಮಗೆ ಎರಡು ಕಾಲಮ್‌ಗಳು ಬೇಕಾದಾಗ, repeat(2, 1fr) ಎಂದು ಬರೆಯಿರಿ.