ઘણાં વર્ષો સુધી, CSS ફ્લોટ્સ વેબસાઇટ લેઆઉટ બનાવવા માટે એક વધુ પડતી, હજુ સુધી જરૂરી ઘટક છે. જો તમારી ડિઝાઇન બહુવિધ કૉલમ્સ માટે કહેવાય છે, તો તમે ફ્લોટ્સ તરફ વળ્યા છો . આ પદ્ધતિની સમસ્યા એ છે કે, અદ્ભુત ચાતુર્ય હોવા છતાં વેબ ડીઝાઇનરો / વિકાસકર્તાઓએ જટિલ સાઇટ લેઆઉટ બનાવવા માં બતાવ્યા છે, CSS ફ્લોટ્સ ખરેખર આ રીતે ઉપયોગમાં લેવાતા નથી.
જ્યારે ફ્લોટ્સ અને CSS પૉઝીસીંગને આવનારા ઘણા વર્ષોથી વેબ ડિઝાઇનમાં સ્થાન હોવું જરૂરી છે, ત્યારે CSS ગ્રીડ અને ફ્લેક્ષબૉક્સ સહિતના નવા લેઆઉટ તકનીકો હવે વેબ ડિઝાઇનર્સને તેમની સાઇટ લેઆઉટ બનાવવા માટેની નવી રીતો આપી રહ્યાં છે. અન્ય નવી લેઆઉટ તકનીક જે સંભવિત ઘણાં બધાં બતાવે છે તે CSS મલ્ટીપલ સ્તંભ છે.
સીએસએસ સ્તંભો થોડા વર્ષોથી આસપાસ છે, પરંતુ જૂના બ્રાઉઝર્સ (મુખ્યત્વે ઇન્ટરનેટ એક્સ્પ્લોરરના જૂના સંસ્કરણ) માં ટેકો ન હોવાને કારણે ઘણા વેબ વ્યાવસાયિકો તેમના ઉત્પાદન કાર્યમાં આ શૈલીઓનો ઉપયોગ કરી રહ્યાં છે.
IE ની જૂની આવૃત્તિઓ માટે સમર્થન સમાપ્ત થયા પછી, કેટલાક વેબ ડીઝાઇનરો હવે નવા CSS લેઆઉટ વિકલ્પો, સીએસએસ સ્તંભોને સમાવતા સાથે પ્રયોગ કરી રહ્યા છે અને શોધતા હોય છે કે તેઓ આ નવા અભિગમો સાથે ફ્લોટ્સ સાથે કરતા વધુ નિયંત્રણ ધરાવે છે.
સીએસએસ સ્તંભોની બેઝિક્સ
તેનું નામ સૂચવે છે તેમ, CSS મલ્ટીપલ કૉલમ (જે CSS3 મલ્ટી કૉલમ લેઆઉટ તરીકે પણ ઓળખાય છે) તમને કૉલમ્સની સેટ નંબરમાં વિભાજિત કરવા માટે પરવાનગી આપે છે. તમે ઉપયોગ કરશો તે સૌથી મૂળભૂત સીએસએસ ગુણધર્મો છે:
- સ્તંભ-ગણતરી
- સ્તંભ-અંતર
સ્તંભ-ગણતરી માટે, તમે કૉલમ્સની સંખ્યાને તમે ઉલ્લેખિત કરો છો. સ્તંભ તફાવત તે સ્તંભો વચ્ચે ગટર અથવા અંતર હશે. બ્રાઉઝર આ મૂલ્યો લેશે અને સામગ્રીને સમાનરૂપે વિભાજિત કરેલા કૉલમ્સની સંખ્યામાં વિભાજિત કરશે.
CSS મલ્ટીપલ કોલમના વ્યવહારમાં એક સામાન્ય ઉદાહરણ ટેક્સ્ટ સામગ્રીના બ્લોકને બહુવિધ કૉલમમાં વિભાજિત કરવાના છે, જે તમે એક અખબારના લેખમાં જોશો. કહો કે તમારી પાસે નીચેના HTML માર્કઅપ છે (નોંધ કરો કે ઉદાહરણ હેતુઓ માટે, હું ફક્ત એક ફકરોની શરુઆત કરી રહ્યો છું, જ્યારે વ્યવહારમાં આ માર્કઅપમાં સામગ્રીની બહુવિધ ફકરા હશે):
તમારા લેખનું મથાળું
અહીં લખાણના ઘણાં ફકરાઓની કલ્પના કરો ...
જો તમે પછી આ CSS શૈલીઓ લખી છે:
.content {-moz-column-count: 3; -વેબકીટ-કૉલમ-ગણતરી: 3; સ્તંભ-ગણતરી: 3; -મોઝ-કૉલમ-ગેપ: 30px; -વેબકીટ-કૉલમ-ગેપ: 30px; કૉલમ-ગેપ: 30px; }આ સીએસએસ નિયમ "સામગ્રી" વિભાગને તેમની વચ્ચે 30 પિક્સેલ્સના તફાવત સાથે 3 સમાન કૉલમ્સમાં વિભાજિત કરશે. જો તમે 3 ની જગ્યાએ બે કૉલમ્સ માગતા હો, તો તમે તે મૂલ્યને સરળતાથી બદલી શકો છો અને બ્રાઉઝર તે સ્તંભની નવી પહોળાંઓની ગણતરી કરશે તે સામગ્રીને સમાનરૂપે વિભાજિત કરશે. નોંધ લો કે આપણે વેન્ડર-પ્રીફિક્સ પ્રોપર્ટીઝનો પ્રથમ ઉપયોગ કરીએ છીએ, ત્યારબાદ નોન-પ્રિફિક્સ ડૉલરલેશનનો ઉપયોગ કરીએ છીએ.
આટલું સરળ છે, આ રીતે તેનો ઉપયોગ વેબસાઇટ વપરાશ માટે સવાલહીન છે. હા, તમે બહુવિધ કૉલમમાં સામગ્રીના ભાગને વિભાજિત કરી શકો છો, પરંતુ વેબ માટે આ શ્રેષ્ઠ વાંચન અનુભવ ન હોઈ શકે, ખાસ કરીને જો આ કૉલમ્સની ઊંચાઈ સ્ક્રીનની "ગડી" ની નીચે આવે છે.
વાચકો પછી સંપૂર્ણ સામગ્રી વાંચવા માટે ઉપર અને નીચે સરકાવવા પડશે. હજુ પણ, સીએસએસ સ્તંભનો મુખ્ય તમે અહીં જુઓ તેટલું સરળ છે, અને તેનો ઉપયોગ ફક્ત કેટલાક ફકરાઓની સામગ્રીને વિભાજિત કરતા વધુ કરવા માટે કરી શકાય છે - ખરેખર, લેઆઉટ માટે ઉપયોગમાં લઈ શકાય છે.
સીએસએસ સ્તંભોને સાથે લેઆઉટ
કહો કે તમારી પાસે સામગ્રી વિસ્તાર સાથે વેબપેજ છે કે જેમાં સામગ્રીના 3 કૉલમ છે. આ એક ખૂબ લાક્ષણિક વેબસાઇટ લેઆઉટ છે, અને તે 3 કૉલમ્સ હાંસલ કરવા માટે, તમે સામાન્ય રીતે વિભાગોને ફ્લોટ કરો છો. CSS બહુવિધ કૉલમ સાથે, તે ખૂબ સરળ છે.
અહીં કેટલાક નમૂના HTML છે:
અધ્યતન સમાચાર
સામગ્રી અહીં આવશે ...
આવનારી પ્રવૃત્તિઓ
સામગ્રી અહીં આવશે ...
p>
આ બહુવિધ કૉલમ્સ બનાવવા માટેનું CSS તમે પહેલાં જોયું છે તેનાથી શરૂ થાય છે:
.content {-moz-column-count: 3; -વેબકીટ-કૉલમ-ગણતરી: 3; સ્તંભ-ગણતરી: 3; -મોઝ-કૉલમ-ગેપ: 30px; -વેબકીટ-કૉલમ-ગેપ: 30px; કૉલમ-ગેપ: 30px; } હવે, અહીં પડકાર એ છે કે, બ્રાઉઝર આ સામગ્રીને સમાનરૂપે વિભાજિત કરવા માંગે છે, તેથી જો આ વિભાગોની સામગ્રીની લંબાઈ અલગ છે, તો તે બ્રાઉઝર વાસ્તવમાં વ્યક્તિગત વિભાજનની સામગ્રીને વિભાજિત કરશે, તે એક સ્તંભમાં પ્રારંભ કરશે અને પછી બીજામાં ચાલુ રાખો (તમે પ્રયોગ ચલાવવા માટે અને આ દરેક વિભાગમાં સામગ્રીની અલગ અલગ લંબાઈ ઉમેરવા માટે આ કોડનો ઉપયોગ કરીને જોઈ શકો છો)!
તે તમને જે જોઈએ તે નથી. તમે ઇચ્છો છો કે દરેક વિભાગો અલગ કૉલમ બનાવશે અને વ્યક્તિગત વિભાજનની સામગ્રી કેટલું મોટું કે નાનું હશે તે ભલે ગમે તે હોય, તમે ક્યારેય તેને વિભાજિત કરવા નથી માગતા. તમે આ એક વધારાનો રેખા CSS ઉમેરીને મેળવી શકો છો:
.content div {display: inline-block; } આનાથી તે વિભાગોને "સામગ્રી" ની અંદરના હોય તે માટે અકબંધ રહેવાની ફરજ પડશે કારણ કે બ્રાઉઝર આને બહુવિધ કૉલમમાં વિભાજિત કરે છે. વધુ સારું, કારણ કે અમે અહીં કોઈ ચોક્કસ પહોળાઈ આપી નહોતી, આ કૉલમ્સ આપોઆપ બ્રાઉઝર રીઝાઈઝ તરીકે રીસેટ કરશે, તેમને પ્રતિભાવશીલ વેબસાઇટ્સ માટે આદર્શ એપ્લિકેશન બનાવશે. તે જગ્યાએ "ઇનલાઇન-બ્લોક" શૈલી સાથે, તમારા દરેક 3 વિભાગો સામગ્રીનો એક અલગ કૉલમ હશે.
કૉલમ-પહોળાઈનો ઉપયોગ કરીને
ત્યાં "કોલમ-ગણતરી" ઉપરાંત અન્ય એક સંપત્તિ છે જેનો ઉપયોગ તમે કરી શકો છો અને તમારી લેઆઉટ જરૂરિયાતો પર આધાર રાખીને, તે ખરેખર તમારી સાઇટ માટે વધુ સારી પસંદગી હોઈ શકે છે. આ "સ્તંભ-પહોળાઈ" છે અગાઉ દર્શાવ્યા મુજબ સમાન HTML માર્કઅપનો ઉપયોગ કરીને, આપણે તેના બદલે અમારા CSS સાથે કરી શકીએ છીએ:
.content {-moz-column-width: 500px; વેબકિટ-કૉલમ-પહોળાઈ: 500 પીએક્સ; કૉલમ પહોળાઈ: 500 પીએક્સ; -મોઝ-કૉલમ-ગેપ: 30px; -વેબકીટ-કૉલમ-ગેપ: 30px; કૉલમ-ગેપ: 30px; } .content div {display: inline-block; } જે રીતે આ કાર્ય કરે છે તે છે કે બ્રાઉઝર આ "સ્તંભ-પહોળાઈ" ને તે સ્તંભની મહત્તમ કિંમત તરીકે ઉપયોગ કરે છે. તેથી જો બ્રાઉઝર વિન્ડોમાં 500 પિક્સેલ પહોળું કરતાં ઓછું હોય, તો આ 3 વિભાગો એક સ્તંભમાં દેખાશે, જે બીજામાંના સૌથી ટોચનો હશે. મોબાઇલ / નાના સ્ક્રીન લેઆઉટ માટે આ એક સામાન્ય લેઆઉટ છે.
જેમ જેમ બ્રાઉઝરની પહોળાઈ વધે તેટલું મોટું કરવા માટે 2 કૉલમને ચોક્કસ સ્તંભ અવકાશ સાથે ફિટ કરવા માટે મોટા થાય છે, બ્રાઉઝર આપમેળે એક કૉલમ લેઆઉટથી બે કૉલમ પર જશે. સ્ક્રીનની પહોળાઈ વધારી રાખો અને છેવટે, તમને 3 કૉલમ ડિઝાઇન મળશે, જેમાં દરેક 3 વિભાગો તેમના પોતાના સ્તંભમાં પ્રદર્શિત થશે. ફરી, આ કેટલાક પ્રતિભાવ, મલ્ટી-ડિવાઇસ મૈત્રીપૂર્ણ લેઆઉટ મેળવવા માટેની એક સરસ રીત છે, અને તમને લેઆઉટ શૈલીઓ બદલવા માટે મીડિયા ક્વેરીઝનો ઉપયોગ કરવાની જરૂર નથી!
અન્ય કૉલમ ગુણધર્મો
અહીં આવરાયેલ ગુણધર્મો ઉપરાંત, "કૉલમ-નિયમ" માટેના ગુણધર્મો પણ છે, જેમાં રંગ, શૈલી અને પહોળાઈ મૂલ્યોનો સમાવેશ થાય છે જે તમને તમારા કૉલમ વચ્ચેના નિયમો બનાવવા માટે પરવાનગી આપે છે. જો તમે તમારા કૉલમને અલગ કરવાની કેટલીક રેખાઓ કરવા માંગતા હો તો આનો ઉપયોગ સીમાઓની જગ્યાએ થશે.
પ્રયોગનો સમય
હાલમાં, CSS મલ્ટીપલ કૉલમ લેઆઉટ ખૂબ જ સારી રીતે આધારભૂત છે. ઉપસર્ગો સાથે, 94% જેટલા વેબ યુઝર્સ આ પ્રકારો જોઈ શકશે અને તે બિનઆધારિત જૂથ ખરેખર ઇન્ટરનેટ એક્સ્પ્લોરરના મોટાભાગનાં વર્ઝન હશે જે તમે હવે કોઈપણ રીતે સહાય કરી શકતા નથી.
સમર્થનના આ સ્તરે હવે સ્થાને, સી.એસ.એસ. સ્તંભો સાથે પ્રયોગ શરૂ ન કરવાનું અને ઉત્પાદન તૈયાર વેબસાઇટ્સમાં આ પ્રકારનો ઉપયોગ કરવાની કોઈ કારણ નથી. તમે આ લેખમાં રજૂ કરેલા HTML અને CSS નો ઉપયોગ કરીને તમારા પ્રયોગોને પ્રારંભ કરી શકો છો અને તમારી સાઇટની લેઆઉટની જરૂરિયાતો માટે શું શ્રેષ્ઠ રૂપે કાર્ય કરશે તે જોવા માટે વિવિધ મૂલ્યો સાથે રમી શકો છો
આવનારી પ્રવૃત્તિઓ
સામગ્રી અહીં આવશે ...
p>
આ બહુવિધ કૉલમ્સ બનાવવા માટેનું CSS તમે પહેલાં જોયું છે તેનાથી શરૂ થાય છે:
.content {-moz-column-count: 3; -વેબકીટ-કૉલમ-ગણતરી: 3; સ્તંભ-ગણતરી: 3; -મોઝ-કૉલમ-ગેપ: 30px; -વેબકીટ-કૉલમ-ગેપ: 30px; કૉલમ-ગેપ: 30px; }હવે, અહીં પડકાર એ છે કે, બ્રાઉઝર આ સામગ્રીને સમાનરૂપે વિભાજિત કરવા માંગે છે, તેથી જો આ વિભાગોની સામગ્રીની લંબાઈ અલગ છે, તો તે બ્રાઉઝર વાસ્તવમાં વ્યક્તિગત વિભાજનની સામગ્રીને વિભાજિત કરશે, તે એક સ્તંભમાં પ્રારંભ કરશે અને પછી બીજામાં ચાલુ રાખો (તમે પ્રયોગ ચલાવવા માટે અને આ દરેક વિભાગમાં સામગ્રીની અલગ અલગ લંબાઈ ઉમેરવા માટે આ કોડનો ઉપયોગ કરીને જોઈ શકો છો)!
તે તમને જે જોઈએ તે નથી. તમે ઇચ્છો છો કે દરેક વિભાગો અલગ કૉલમ બનાવશે અને વ્યક્તિગત વિભાજનની સામગ્રી કેટલું મોટું કે નાનું હશે તે ભલે ગમે તે હોય, તમે ક્યારેય તેને વિભાજિત કરવા નથી માગતા. તમે આ એક વધારાનો રેખા CSS ઉમેરીને મેળવી શકો છો:
.content div {display: inline-block; }આનાથી તે વિભાગોને "સામગ્રી" ની અંદરના હોય તે માટે અકબંધ રહેવાની ફરજ પડશે કારણ કે બ્રાઉઝર આને બહુવિધ કૉલમમાં વિભાજિત કરે છે. વધુ સારું, કારણ કે અમે અહીં કોઈ ચોક્કસ પહોળાઈ આપી નહોતી, આ કૉલમ્સ આપોઆપ બ્રાઉઝર રીઝાઈઝ તરીકે રીસેટ કરશે, તેમને પ્રતિભાવશીલ વેબસાઇટ્સ માટે આદર્શ એપ્લિકેશન બનાવશે. તે જગ્યાએ "ઇનલાઇન-બ્લોક" શૈલી સાથે, તમારા દરેક 3 વિભાગો સામગ્રીનો એક અલગ કૉલમ હશે.
કૉલમ-પહોળાઈનો ઉપયોગ કરીને
ત્યાં "કોલમ-ગણતરી" ઉપરાંત અન્ય એક સંપત્તિ છે જેનો ઉપયોગ તમે કરી શકો છો અને તમારી લેઆઉટ જરૂરિયાતો પર આધાર રાખીને, તે ખરેખર તમારી સાઇટ માટે વધુ સારી પસંદગી હોઈ શકે છે. આ "સ્તંભ-પહોળાઈ" છે અગાઉ દર્શાવ્યા મુજબ સમાન HTML માર્કઅપનો ઉપયોગ કરીને, આપણે તેના બદલે અમારા CSS સાથે કરી શકીએ છીએ:
.content {-moz-column-width: 500px; વેબકિટ-કૉલમ-પહોળાઈ: 500 પીએક્સ; કૉલમ પહોળાઈ: 500 પીએક્સ; -મોઝ-કૉલમ-ગેપ: 30px; -વેબકીટ-કૉલમ-ગેપ: 30px; કૉલમ-ગેપ: 30px; } .content div {display: inline-block; }જે રીતે આ કાર્ય કરે છે તે છે કે બ્રાઉઝર આ "સ્તંભ-પહોળાઈ" ને તે સ્તંભની મહત્તમ કિંમત તરીકે ઉપયોગ કરે છે. તેથી જો બ્રાઉઝર વિન્ડોમાં 500 પિક્સેલ પહોળું કરતાં ઓછું હોય, તો આ 3 વિભાગો એક સ્તંભમાં દેખાશે, જે બીજામાંના સૌથી ટોચનો હશે. મોબાઇલ / નાના સ્ક્રીન લેઆઉટ માટે આ એક સામાન્ય લેઆઉટ છે.
જેમ જેમ બ્રાઉઝરની પહોળાઈ વધે તેટલું મોટું કરવા માટે 2 કૉલમને ચોક્કસ સ્તંભ અવકાશ સાથે ફિટ કરવા માટે મોટા થાય છે, બ્રાઉઝર આપમેળે એક કૉલમ લેઆઉટથી બે કૉલમ પર જશે. સ્ક્રીનની પહોળાઈ વધારી રાખો અને છેવટે, તમને 3 કૉલમ ડિઝાઇન મળશે, જેમાં દરેક 3 વિભાગો તેમના પોતાના સ્તંભમાં પ્રદર્શિત થશે. ફરી, આ કેટલાક પ્રતિભાવ, મલ્ટી-ડિવાઇસ મૈત્રીપૂર્ણ લેઆઉટ મેળવવા માટેની એક સરસ રીત છે, અને તમને લેઆઉટ શૈલીઓ બદલવા માટે મીડિયા ક્વેરીઝનો ઉપયોગ કરવાની જરૂર નથી!
અન્ય કૉલમ ગુણધર્મો
અહીં આવરાયેલ ગુણધર્મો ઉપરાંત, "કૉલમ-નિયમ" માટેના ગુણધર્મો પણ છે, જેમાં રંગ, શૈલી અને પહોળાઈ મૂલ્યોનો સમાવેશ થાય છે જે તમને તમારા કૉલમ વચ્ચેના નિયમો બનાવવા માટે પરવાનગી આપે છે. જો તમે તમારા કૉલમને અલગ કરવાની કેટલીક રેખાઓ કરવા માંગતા હો તો આનો ઉપયોગ સીમાઓની જગ્યાએ થશે.
પ્રયોગનો સમય
હાલમાં, CSS મલ્ટીપલ કૉલમ લેઆઉટ ખૂબ જ સારી રીતે આધારભૂત છે. ઉપસર્ગો સાથે, 94% જેટલા વેબ યુઝર્સ આ પ્રકારો જોઈ શકશે અને તે બિનઆધારિત જૂથ ખરેખર ઇન્ટરનેટ એક્સ્પ્લોરરના મોટાભાગનાં વર્ઝન હશે જે તમે હવે કોઈપણ રીતે સહાય કરી શકતા નથી.
સમર્થનના આ સ્તરે હવે સ્થાને, સી.એસ.એસ. સ્તંભો સાથે પ્રયોગ શરૂ ન કરવાનું અને ઉત્પાદન તૈયાર વેબસાઇટ્સમાં આ પ્રકારનો ઉપયોગ કરવાની કોઈ કારણ નથી. તમે આ લેખમાં રજૂ કરેલા HTML અને CSS નો ઉપયોગ કરીને તમારા પ્રયોગોને પ્રારંભ કરી શકો છો અને તમારી સાઇટની લેઆઉટની જરૂરિયાતો માટે શું શ્રેષ્ઠ રૂપે કાર્ય કરશે તે જોવા માટે વિવિધ મૂલ્યો સાથે રમી શકો છો