बर्याच वर्षांपासून, सीएसएस फ्लोट्स वेबसाइट लेआउट्स तयार करण्याकरिता एक छाननी, पण आवश्यक घटक आहे. जर आपल्या डिझाईनला एकाधिक स्तंभांसाठी बोलावले, तर आपण फ्लोट्सकडे वळले या पद्धतीत समस्या अशी आहे की, अविश्वसनीय कौशल्य असूनही वेब डिझायनर / विकासक जटिल साइट लेआउट तयार करण्यास दर्शवितात, सीएसएस फ्लोट्स खरोखरच या प्रकारे वापरण्याजोगी नव्हते.
फ्लॅट आणि सीएसएस पोजिशनिंग हे अनेक वर्षांपर्यंत वेब डिझाइनमध्ये एक स्थान असल्याची खात्री असली तर, सीएसएस ग्रिड आणि फ्लेक्सबॉक्ससह नवीन लेआउट तंत्रज्ञाने आता वेब डिझायनर्सना त्यांचे साइट लेआऊट तयार करण्याचे नवीन मार्ग देत आहेत. आणखी एक नवीन मांडणी तंत्र जे सीझनची पुष्कळशा क्षमता दर्शविते. सीएसएस मल्टीपल कॉलम्स
सीएसएस स्तंभ आता काही वर्षांपासून अस्तित्त्वात आहेत, परंतु जुन्या ब्राऊझर्स (मुख्यतः इंटरनेट एक्सप्लोररच्या जुन्या आवृत्त्या) मध्ये आधारलेल्या अभावाने अनेक वेब व्यावसायिकांनी त्यांचे उत्पादन कार्य या शैली वापरण्यापासून वाचविले आहे.
IE च्या त्या जुन्या आवृत्त्यांच्या समर्थनार्थ अखेरीस, काही वेब डिझाइनर आता नवीन CSS लेआउट पर्यायांसह प्रयोग करीत आहेत, सीएसएस स्तंभ समाविष्ट केले आहेत आणि शोधत आहेत की त्यांच्याकडे नवीन फ्लॅट्सच्या तुलनेत या नवीन पध्दती आहेत.
CSS स्तंभाची मूलभूत माहिती
त्याचे नाव सुचविते म्हणून, CSS एकाधिक कॉलम्स (जे CSS3 मल्टी कॉलम लेआउट म्हणूनही ओळखले जाते) आपल्याला एका सेट केलेल्या स्तंभामध्ये विभाजित करण्याची परवानगी देते. आपण वापरणार असलेली सर्वात मूलभूत सीएसएस गुणधर्म खालील प्रमाणे आहेत:
- स्तंभ-गणना
- स्तंभ-अंतर
स्तंभ-गणनेसाठी, आपल्याला पाहिजे असलेल्या स्तंभांची संख्या निर्दिष्ट करा. स्तंभ अंतर हे त्या स्तंभांमधील अंतर किंवा अंतर असेल. ब्राउझर ही मूल्ये घेईल आणि आपण निर्दिष्ट केलेल्या स्तंभांची संख्या समान समानतेने विभाजित करेल.
सीएसएस बहुविध स्तंभांचे एक सामान्य उदाहरण म्हणजे एका वृत्तपत्राच्या लेखात आपण जे काही पहाल ते सारखे मजकूर स्तंभ एक ब्लॉक एकाधिक विभागांमध्ये विभाजित करणे. समजा आपल्याकडे पुढील HTML मार्कअप आहेत (लक्षात घ्या की उदाहरणादाखल, मी फक्त एक पॅरेग्राफ सुरू करीत आहे, तर प्रथमतः या मार्कअपमधील सामग्रीचे एकाधिक अनुच्छेद असू शकतात):
आपल्या लेखाचे शीर्षक
येथे मजकुराच्या बर्याच पॅराग्राफींची कल्पना करा ...
आपण नंतर ही सीएसएस शैली लिहिले तर:
.content {-moz-column-count: 3; -webkit-column-count: 3; स्तंभ-संख्या: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; स्तंभ-अंतर: 30 पीएक्स; }हा CSS नियम "सामग्री" विभागात त्यांच्या दरम्यान 30 पिक्सेलच्या अंतरासह 3 समान स्तंभ तयार करेल. जर आपल्याला 3 ऐवजी दोन कॉलम हवे असेल तर आपण ती व्हॅल्यू बदलू शकता आणि ब्राऊजर त्या स्तंभाच्या नवीन रुंदीची मोजमाप करू शकतील ज्यायोगे सामुग्री समान प्रकारे विभाजित करू शकतील. लक्षात घ्या की आपण प्रथम व्हेंडर-प्रिफिक्स गुणधर्म वापरु शकतो, त्यानंतर नॉन-प्रिफिक्स्ड डिक्लेरेशन.
हे आहे तितके सोपे, अशा प्रकारे त्याचा वापर वेबसाइट वापरण्यासाठी शंकास्पद आहे. होय, आपण सामग्रीचे एक भाग एकाधिक स्तंभांमध्ये विभाजित करू शकता परंतु हे वेबसाठी सर्वोत्तम वाचन अनुभव असू शकत नाही, विशेषत: या स्तंभांची उंची स्क्रीनच्या "गुड" खाली येते.
वाचकांना नंतर संपूर्ण सामग्री वाचण्यासाठी वर आणि खाली स्क्रोल करणे आवश्यक आहे. तरीही, सीएसएस स्तंभाचे प्राचार्य हे आपण पाहत अगदी सहज आहे, आणि काही परिच्छेदांची सामग्री केवळ विभाजित करण्यापेक्षा असे बरेच काही करण्यास ते वापरले जाऊ शकते - हे खरंच लेआउटसाठी वापरले जाऊ शकते.
CSS स्तंभासह लेआउट
समजा आपल्याकडे सामग्री क्षेत्रासह एक वेबपृष्ठ आहे ज्यात सामग्रीच्या 3 कॉलम आहेत. हे एक ठराविक वेबसाइट लेआउट आहे, आणि त्या 3 कॉलम्स साध्य करण्यासाठी, आपण सामान्यतः ज्या विभागांमध्ये असतात त्या फॉरमॅट करतील. CSS एकाधिक-स्तंभांसह, हे खूप सोपे आहे
येथे HTML चा काही नमूना आहे:
ताज्या बातम्या
सामग्री येथे जाईल ...
आगामी इव्हेंट
सामग्री येथे होईल ...
p>
आपण पूर्वी पाहिल्याप्रमाणे या एकाधिक स्तंभांची सुरूवात करण्यासाठी CSS:
.content {-moz-column-count: 3; -webkit-column-count: 3; स्तंभ-संख्या: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; स्तंभ-अंतर: 30 पीएक्स; } आता, येथे आव्हान हे आहे की, ब्राउझर ही सामग्री समान रीतीने विभाजित करू इच्छित असल्याने, जर या विभागातील सामग्रीची लांबी वेगळी आहे, तर त्या ब्राउझरने खरंच स्वतंत्र विभाजनाची सामग्री विभाजित केली असेल आणि त्यास एक स्तंभ सुरू होईल नंतर दुसर्या मध्ये सुरू (आपण एक प्रयोग चालवण्यासाठी हा कोड वापरून आणि प्रत्येक विभाग आत सामग्री विविध लांबी जोडू शकता हे पाहू शकता)!
आपल्याला काय हवे आहे ते नाही. आपण या विभागातील प्रत्येक विभागात एक वेगळा स्तंभ तयार करू इच्छित आहात आणि, प्रत्येक विभागातील सामग्री कितीही मोठी किंवा लहान असली तरीही, आपण ते विभाजित करू इच्छित नसता. आपण हे सीएसएस चे एक अतिरिक्त ओळी जोडून हे साध्य करू शकता:
.content div {display: inline-block; } यामुळे "सामग्री" च्या आत असलेल्या विभागांना बर्यापैकी कायम राहण्यास मदत होईल कारण ब्राउझर हे हे एकाधिक स्तंभांमध्ये विभाजित करते. आणखी चांगल्या प्रकारे, आम्ही येथे एक निश्चित रूंदी काहीही दिले नाही म्हणून, हे स्तंभ स्वयंचलितपणे ब्राउझर आकारमान म्हणून रीसाइज होतील, त्यांना प्रतिसाद वेबसाइटसाठी एक आदर्श अनुप्रयोग बनवून. त्या जागी "इनलाइन ब्लॉक" शैली असल्यास, आपल्या 3 विभागातील प्रत्येक सामग्रीचा वेगळा स्तंभ असेल.
स्तंभ-रुंदी वापरणे
आपण वापरू शकता "कॉलम-गज" शिवाय आणखी एक ठिकाण आहे आणि आपल्या लेआऊट गरजेनुसार, हे आपल्या साइटसाठी खरोखर चांगले पर्याय असू शकते. हे "स्तंभ-रुंदी" आहे आधी दर्शविल्यानुसार समान HTML मार्क अप वापरणे, आम्ही त्याऐवजी आपल्या सीएसएस बरोबर असे करू शकतो:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; स्तंभ-रुंदीः 500 पिक्सेल; -moz-column-gap: 30px; -webkit-column-gap: 30px; स्तंभ-अंतर: 30 पीएक्स; } .content div {display: inline-block; } हे कार्य करते त्या मार्गाने ब्राउझर हा "स्तंभ-रूंदी" या स्तंभाचे कमाल मूल्य म्हणून वापरतो. म्हणून जर ब्राउझर विंडो 500 पिक्सल्स पेक्षा कमी असेल तर या 3 डिव्हिजन एकाच स्तंभात दिसतील, दुसऱ्याच्या सर्वात वरच्या. मोबाईल / लघु स्क्रीन लेआउटसाठी हे एक सामान्य लेआउट आहे
ब्राऊजरची रूंदी त्यास विशिष्ट स्तंभ समाप्तीसह 2 कॉलम बसविण्यासाठी एवढे मोठे बनते की, ब्राउझर आपोआप एक कॉलम लेआउट दोन कॉलम वरून जाईल. स्क्रीन रुंदी वाढवा आणि अखेरीस, आपल्याला 3 स्तंभ डिझाईन मिळतील, आपल्या प्रत्येकी 3 विभागात त्यांच्या स्वतःच्या कॉलममध्ये प्रदर्शित केले जाईल. पुन्हा, हे काही प्रतिसादी, मल्टि-डिव्हाइस फ्रेंडली मांडणी मिळविण्याचा एक चांगला मार्ग आहे आणि लेआउट शैली बदलण्यासाठी आपल्याला मिडीया क्वेरीचा देखील वापर करण्याची आवश्यकता नाही!
इतर स्तंभ गुणधर्म
येथे समाविष्ट केलेल्या मालमत्ते व्यतिरिक्त, "स्तंभ-नियम" साठी देखील गुणधर्म आहेत, ज्यात रंग, शैली आणि रूंदी मूल्ये समाविष्ट आहेत जी आपल्याला आपल्या स्तंभांदरम्यान नियम तयार करण्यास अनुमती देतात. आपण आपल्या स्तंभांना विभक्त करण्यासाठी काही ओळी ठेवू इच्छित असल्यास हे बॉर्डर ऐवजी वापरले जाईल.
प्रयोगासाठी वेळ
सध्या, सीएसएस मल्टिपल कॉलम लेआउट फारच समर्थित आहे. उपसर्गांसह, 94% पेक्षा अधिक वेब वापरकर्ते ही शैली पाहण्यास सक्षम होतील आणि असमर्थित गट खरोखरच इंटरनेट एक्सप्लोररचे बरेच जुन्या आवृत्त्या असतील जे आपण कोणत्याही प्रकारचे समर्थन करू शकणार नाही.
या स्तराचे समर्थन आता अस्तित्त्वात घेऊन, सीएसएस स्तंभासह प्रयोग सुरू करणे आणि उत्पादनासाठी तैयार वेबसाइट्स मध्ये या शैलीचे नियोजन न करणे नाही. आपण या लेखातील HTML आणि CSS चा वापर करून आपले प्रयोग प्रारंभ करू शकता आणि आपल्या साइटच्या लेआउट गरजा चांगल्यासाठी काय कार्य करेल हे पाहण्यासाठी भिन्न मूल्यांसह प्ले करू शकता.
आगामी इव्हेंट
सामग्री येथे होईल ...
p>
आपण पूर्वी पाहिल्याप्रमाणे या एकाधिक स्तंभांची सुरूवात करण्यासाठी CSS:
.content {-moz-column-count: 3; -webkit-column-count: 3; स्तंभ-संख्या: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; स्तंभ-अंतर: 30 पीएक्स; }आता, येथे आव्हान हे आहे की, ब्राउझर ही सामग्री समान रीतीने विभाजित करू इच्छित असल्याने, जर या विभागातील सामग्रीची लांबी वेगळी आहे, तर त्या ब्राउझरने खरंच स्वतंत्र विभाजनाची सामग्री विभाजित केली असेल आणि त्यास एक स्तंभ सुरू होईल नंतर दुसर्या मध्ये सुरू (आपण एक प्रयोग चालवण्यासाठी हा कोड वापरून आणि प्रत्येक विभाग आत सामग्री विविध लांबी जोडू शकता हे पाहू शकता)!
आपल्याला काय हवे आहे ते नाही. आपण या विभागातील प्रत्येक विभागात एक वेगळा स्तंभ तयार करू इच्छित आहात आणि, प्रत्येक विभागातील सामग्री कितीही मोठी किंवा लहान असली तरीही, आपण ते विभाजित करू इच्छित नसता. आपण हे सीएसएस चे एक अतिरिक्त ओळी जोडून हे साध्य करू शकता:
.content div {display: inline-block; }यामुळे "सामग्री" च्या आत असलेल्या विभागांना बर्यापैकी कायम राहण्यास मदत होईल कारण ब्राउझर हे हे एकाधिक स्तंभांमध्ये विभाजित करते. आणखी चांगल्या प्रकारे, आम्ही येथे एक निश्चित रूंदी काहीही दिले नाही म्हणून, हे स्तंभ स्वयंचलितपणे ब्राउझर आकारमान म्हणून रीसाइज होतील, त्यांना प्रतिसाद वेबसाइटसाठी एक आदर्श अनुप्रयोग बनवून. त्या जागी "इनलाइन ब्लॉक" शैली असल्यास, आपल्या 3 विभागातील प्रत्येक सामग्रीचा वेगळा स्तंभ असेल.
स्तंभ-रुंदी वापरणे
आपण वापरू शकता "कॉलम-गज" शिवाय आणखी एक ठिकाण आहे आणि आपल्या लेआऊट गरजेनुसार, हे आपल्या साइटसाठी खरोखर चांगले पर्याय असू शकते. हे "स्तंभ-रुंदी" आहे आधी दर्शविल्यानुसार समान HTML मार्क अप वापरणे, आम्ही त्याऐवजी आपल्या सीएसएस बरोबर असे करू शकतो:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; स्तंभ-रुंदीः 500 पिक्सेल; -moz-column-gap: 30px; -webkit-column-gap: 30px; स्तंभ-अंतर: 30 पीएक्स; } .content div {display: inline-block; }हे कार्य करते त्या मार्गाने ब्राउझर हा "स्तंभ-रूंदी" या स्तंभाचे कमाल मूल्य म्हणून वापरतो. म्हणून जर ब्राउझर विंडो 500 पिक्सल्स पेक्षा कमी असेल तर या 3 डिव्हिजन एकाच स्तंभात दिसतील, दुसऱ्याच्या सर्वात वरच्या. मोबाईल / लघु स्क्रीन लेआउटसाठी हे एक सामान्य लेआउट आहे
ब्राऊजरची रूंदी त्यास विशिष्ट स्तंभ समाप्तीसह 2 कॉलम बसविण्यासाठी एवढे मोठे बनते की, ब्राउझर आपोआप एक कॉलम लेआउट दोन कॉलम वरून जाईल. स्क्रीन रुंदी वाढवा आणि अखेरीस, आपल्याला 3 स्तंभ डिझाईन मिळतील, आपल्या प्रत्येकी 3 विभागात त्यांच्या स्वतःच्या कॉलममध्ये प्रदर्शित केले जाईल. पुन्हा, हे काही प्रतिसादी, मल्टि-डिव्हाइस फ्रेंडली मांडणी मिळविण्याचा एक चांगला मार्ग आहे आणि लेआउट शैली बदलण्यासाठी आपल्याला मिडीया क्वेरीचा देखील वापर करण्याची आवश्यकता नाही!
इतर स्तंभ गुणधर्म
येथे समाविष्ट केलेल्या मालमत्ते व्यतिरिक्त, "स्तंभ-नियम" साठी देखील गुणधर्म आहेत, ज्यात रंग, शैली आणि रूंदी मूल्ये समाविष्ट आहेत जी आपल्याला आपल्या स्तंभांदरम्यान नियम तयार करण्यास अनुमती देतात. आपण आपल्या स्तंभांना विभक्त करण्यासाठी काही ओळी ठेवू इच्छित असल्यास हे बॉर्डर ऐवजी वापरले जाईल.
प्रयोगासाठी वेळ
सध्या, सीएसएस मल्टिपल कॉलम लेआउट फारच समर्थित आहे. उपसर्गांसह, 94% पेक्षा अधिक वेब वापरकर्ते ही शैली पाहण्यास सक्षम होतील आणि असमर्थित गट खरोखरच इंटरनेट एक्सप्लोररचे बरेच जुन्या आवृत्त्या असतील जे आपण कोणत्याही प्रकारचे समर्थन करू शकणार नाही.
या स्तराचे समर्थन आता अस्तित्त्वात घेऊन, सीएसएस स्तंभासह प्रयोग सुरू करणे आणि उत्पादनासाठी तैयार वेबसाइट्स मध्ये या शैलीचे नियोजन न करणे नाही. आपण या लेखातील HTML आणि CSS चा वापर करून आपले प्रयोग प्रारंभ करू शकता आणि आपल्या साइटच्या लेआउट गरजा चांगल्यासाठी काय कार्य करेल हे पाहण्यासाठी भिन्न मूल्यांसह प्ले करू शकता.