display ਸਭ ਤੋਂ ਬੁਨਿਆਦੀ CSS ਪ੍ਰਾਪਰਟੀਆਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ — ਇਹ ਇੱਕ ਐਲੀਮੈਂਟ ਇੱਕ ਬਾਕਸ ਕਿਵੇਂ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਇਸਦੇ ਬੱਚਿਆਂ ਨੂੰ ਕਿਵੇਂ ਸਜਾਇਆ ਜਾਂਦਾ ਹੈ ਇਸ ਨੂੰ ਨਿਯੰਤ੍ਰਣ ਕਰਦਾ ਹੈ।
{ : block; }
{ : inline; }
{ : inline-block; }
{ : none; }
{ : flex; }
{ : grid; }
display ਅਸਲ ਵਿੱਚ ਦੋ ਚੀਜ਼ਾਂ ਸੈਟ ਕਰਦਾ ਹੈ: ਬਾਕਸ ਬਾਹਰ (block/inline) ਤੋਂ ਕਿਵੇਂ ਵਿਹਾਰ ਕਰਦਾ ਹੈ ਅਤੇ ਇਹ ਆਪਣੇ ਬੱਚਿਆਂ ਨੂੰ ਅੰਦਰ (flow/flex/grid) ਤੋਂ ਕਿਵੇਂ ਸਜਾਉਂਦਾ ਹੈ। display: flex ਮਤਲਬ "ਇਹ ਬਾਕਸ ਬਲਾਕ-ਲੈਵਲ ਹੈ, ਅਤੇ ਇਸਦੇ ਬੱਚੇ ਫਲੈਕਸ ਆਈਟਮਾਂ ਹਨ।"
.gone { display: none; } /* removed from layout — takes NO space */
.hidden { visibility: hidden; } /* invisible but STILL occupies its space */
ਇੱਕ ਮੁੱਖ ਅੰਤਰ: display: none ਲੇਆਉਟ ਨੂੰ ਖਸੇੜਦਾ ਹੈ (ਅਤੇ ਸਕ੍ਰੀਨ ਰਿਡਰਾਂ ਤੋਂ ਲੁਕਾਉਂਦਾ ਹੈ); visibility: hidden ਉਥੇ ਇੱਕ ਖਾਲੀ ਥਾਂ ਛੱਡਦਾ ਹੈ ਜਿੱਥੇ ਐਲੀਮੈਂਟ ਸੀ। ਸਚਮੁਚ ਹਟਾਉਣ ਲਈ display: none ਵਰਤੋ, ਲੇਆਉਟ ਨੂੰ ਸੁਰੱਖਿਤ ਰੱਖਦੇ ਹੋਏ ਲੁਕਾਉਣ ਲਈ visibility: hidden ਵਰਤੋ।
.container {
display: flex; /* lay children in a row/column (one dimension) */
gap: 1rem;
}
.grid {
display: grid; /* lay children in rows AND columns (two dimensions) */
grid-template-columns: repeat(3, 1fr);
}
ਆਧੁਨਿਕ ਲੇਆਉਟ ਲਗਭਗ ਪੂਰੀ ਤਰ੍ਹਾਂ flex (1D — ਕਤਾਰਾਂ ਜਾਂ ਕਾਲਮ) ਅਤੇ grid (2D — ਕਤਾਰਾਂ ਅਤੇ ਕਾਲਮ ਇਕੱਠੇ) 'ਤੇ ਬਣਿਆ ਹੋਇਆ ਹੈ।
display ਇੱਕ ਐਲੀਮੈਂਟ ਦਾ ਪੂਰਾ ਲੇਆਉਟ ਵਿਹਾਰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ।
Block ਬਨਾਮ inline ਬਨਾਮ inline-block ਨੂੰ ਜਾਣਨਾ ਡਿਫਾਲਟ ਫਲੋ ਦੀ ਵਿਆਖਿਆ ਕਰਦਾ ਹੈ; flex/grid ਆधুनिक ਲੇਆਉਟ ਦਾ ਕੋਰ ਹਨ; ਅਤੇ none ਬਨਾਮ visibility ਭਿੰਨਤਾ ਇੱਕ ਬਾਰ-ਬਾਰ ਪਰੀਖਿਆ ਕੀਤਾ, ਵਿਹਾਰਕ-ਮਹੱਤਵਪੂਰਨ ਵਿਸਥਾਰ ਹੈ।