मालवेअर हे अनाहूत किंवा धोकादायक प्रोग्राम आहेत जे...
लेखकाकडून:लेआउट मालिकेच्या संकल्पनेतील लेख CSS ग्रिड. मागील धड्यांमध्ये, आम्ही ग्रिड सिंटॅक्स शिकलो, पृष्ठावर घटकांची मांडणी करण्याचे अनेक मार्ग शिकलो आणि काही जुन्या सवयींचा निरोप घेतला. या ट्युटोरियलमध्ये आपण प्रतिसादात्मक मांडणी तयार करण्यासाठी आपले सर्व ज्ञान व्यवहारात आणू.
मीडिया प्रश्न
मागील धड्यातून डेमो घेऊ.
पृष्ठामध्ये दोन ग्रिड असतात: मुख्य ग्रिड आणि एक घटकांच्या आत नेस्टेड. मीडिया क्वेरी वापरून आम्ही आमच्या मेश नियंत्रित करू शकतो. याचा अर्थ असा की भिन्न स्क्रीन रुंदी बसविण्यासाठी आम्ही लेआउट पूर्णपणे पुनर्बांधणी करू शकतो.
आम्ही पहिल्या ग्रिडची घोषणा कॉपी करून सुरुवात करू. मोबाईल-फर्स्ट तंत्राचा वापर करून डुप्लिकेट मीडिया क्वेरीमध्ये गुंडाळूया. मी अनियंत्रितपणे संक्रमण बिंदू म्हणून 500px घेतला.
ग्रिड-1 ( /* ग्रिड शैली */ ) @media फक्त स्क्रीन आणि (किमान-रुंदी: 500px) ( .grid-1 ( /* ग्रिड शैली */ ) )
आता आम्ही सर्व काही एका कॉलममध्ये ठेवण्यासाठी पहिल्या जाहिरातीत आमची ग्रिड बदलू. आम्ही ग्रिड-टेम्प्लेट-कॉलम्स प्रॉपर्टी वापरून एक कॉलम सेट करतो. आमच्या चार पंक्ती ग्रिड-टेम्प्लेट-रो गुणधर्म वापरून सेट केल्या आहेत हे तपासा आणि ग्रिड-टेम्प्लेट-क्षेत्र गुणधर्म वापरून लेआउटशी जुळवा:
ग्रिड-1 (प्रदर्शन: ग्रिड; रुंदी: 100%; समास: 0 ऑटो; ग्रिड-टेम्प्लेट-स्तंभ: 1fr; ग्रिड-टेम्प्लेट-पंक्ती: 80px ऑटो ऑटो 80px; ग्रिड-अंतर: 10px; ग्रिड-टेम्प्लेट-क्षेत्रे: " शीर्षलेख" "मुख्य" "साइडबार" "फूटर";)
ग्रिड - 1 ( डिस्प्ले:ग्रिड; रुंदी: 100%; मार्जिन: 0 ऑटो; ग्रिड - टेम्पलेट - स्तंभ : 1fr ; ग्रिड - टेम्पलेट - पंक्ती : 80px ऑटो ऑटो 80px ; ग्रिड - अंतर : 10px ; ग्रिड - टेम्पलेट - क्षेत्रे : "शीर्षलेख" "मुख्य" "साइडबार" "फूटर" ; |
छोट्या स्क्रीनवर बसण्यासाठी, आम्ही ग्रिड-गॅप डीफॉल्टनुसार 10px वर सेट करतो. हे आम्हाला मिळाले. आपण हे देखील लक्षात घेतले पाहिजे की आपण बदलतो पॅडिंग गुणधर्मआणि मीडिया क्वेरी वापरून .grid-1 div घटकांमध्ये फॉन्ट-आकार.
आमची नेस्टेड ग्रिड
वरील कोड आमच्या मुख्य लेआउटमध्ये बदल करतो. तथापि, आमच्याकडे अद्याप एक नेस्टेड ग्रिड आहे जो कोणत्याही स्क्रीनवरील दोन स्तंभांपासून मुक्त होण्यास हट्टीपणे नकार देतो. याचे निराकरण करण्यासाठी, आम्ही तेच करू, परंतु सामग्री-प्रथम पद्धत वापरून भिन्न संक्रमण बिंदू घेऊ:
आयटम-2 ( /* ग्रिड शैली */ ) @media फक्त स्क्रीन आणि (किमान-रुंदी: 600px) ( .item-2 ( /* ग्रिड शैली */ ) )
जर आम्ही ऑटोफिल डेमो पुन्हा करायचो आणि स्तंभाची रुंदी minmax(9em, 1fr) मध्ये बदलली तर, ग्रिड शक्य तितक्या 9em-रुंद ट्रॅक बसवण्याचा प्रयत्न करेल आणि नंतर संपूर्ण कंटेनर भरेपर्यंत त्यांचा 1fr पर्यंत विस्तार करेल:
गैरसोय: ग्रिड फक्त रीबूट केल्यानंतर ट्रॅकची पुनर्गणना करेल, आणि विंडो रुंदी बदलल्यावर नाही. तुमची ब्राउझर विंडो अरुंद करून पेज रिफ्रेश करण्याचा प्रयत्न करा. मूल्ये बदलण्यासाठी, तुम्ही मीडिया क्वेरी कनेक्ट करू शकता, परंतु ब्राउझर विंडोची रुंदी बदलून ते चांगले कार्य करत नाहीत.
निष्कर्ष
चला वरील सर्व गोष्टींचा सारांश यादीत करूया:
मीडिया क्वेरी आम्हाला वेगवेगळ्या परिस्थितींसाठी ग्रिड-टेम्प्लेट-क्षेत्र गुणधर्म (आणि इतर) बदलून ग्रिड पूर्णपणे पुनर्बांधणी करण्यास परवानगी देतात.
संक्रमण गुणधर्माचा ग्रिड लेआउटवर कोणताही प्रभाव पडत नाही.
जाळीदार कंटेनर भरण्यासाठी चांगले कीवर्डस्वयं-भरणे
minmax() फंक्शन स्वयंपूर्णतेसाठी एक उत्तम जोड आहे, परंतु ते आम्हाला वास्तविक अनुकूलता देत नाही.
आता तुम्ही मेशेसह काम करण्यास तयार आहात! अधिक CSS ग्रिड लेख, हँड-ऑन व्यायाम आणि सामान्य ग्रिड समस्यांचे निराकरण करण्यासाठी संपर्कात रहा.
सर्वांना नमस्कार! आज आपण याबद्दल बोलू ग्रिड प्रणाली काय आहेत?किंवा फक्त अनुकूली मांडणीमध्ये लवचिक ग्रिड.
प्रथम ते काय आहे ते परिभाषित करूया ग्रिड सिस्टम.
ग्रिड सिस्टम- वर्ग-आधारित शैलींचा संग्रह जो वापरकर्त्याला पंक्ती आणि स्तंभांची प्रणाली वापरून पृष्ठ लेआउट नियंत्रित करण्यास अनुमती देतो.
चला कल्पना करूया की आमच्याकडे एक ब्लॉग पृष्ठ आहे. हे 2 स्तंभांमध्ये विभागलेले आहे: मुख्य भाग डावीकडे आणि साइडबार उजवीकडे. अशा पृष्ठासाठी लवचिक ग्रिड तयार करण्याचा प्रयत्न करूया.
बरं, प्रथम आपल्याला काहीतरी मूलभूत करावे लागेल, परंतु ... htmlखुणा
येथे आमच्याकडे एक ब्लॉक आहे ज्यामध्ये संपूर्ण पृष्ठ आहे, त्यात ब्लॉगसह एक ब्लॉक आहे, ज्यामध्ये 2 ब्लॉक्स आहेत: पृष्ठाचा मुख्य भाग आणि साइडबार.
त्यामुळे आमच्या संपूर्ण पानाचा आकार असेल 960px. संपूर्ण ग्रिड 12 स्तंभांमध्ये विभागली आहे 69px. प्रत्येक ब्लॉगचा भाग विस्तृत असेल 900px. पृष्ठाचा मुख्य भाग असेल 566px, साइडबार - 331px.
शेवटी हेच मिळते
#पृष्ठ (
समास: 36px स्वयं;
रुंदी: 960px;
}
ब्लॉग (
मार्जिन: 0 ऑटो 53px;
रुंदी: 900px;
}
Blog.main (
फ्लोट: डावीकडे;
रुंदी: 566px;
}
ब्लॉग .साइडबार (
फ्लोट: उजवीकडे;
रुंदी: 331px;
}
सर्व काही ठीक होईल, परंतु, जसे आपण पाहू शकता, हे सर्व स्थिर आहे, पिक्सेलमध्ये निर्दिष्ट केले आहे. पृष्ठ कोणत्या स्क्रीनवर पाहिले जाते त्यानुसार आमच्या ग्रिडने त्याचा आकार बदलावा अशी आमची इच्छा आहे, म्हणून आम्हाला सर्वकाही सेट करावे लागेल टक्के. चल हे करूया.
यासाठी फॉन्ट्स प्रमाणेच सूत्र आहे
ध्येय / संदर्भ = परिणाम
संपूर्ण पानाचा ब्लॉक पिक्सेल ते टक्केवारीत रूपांतरित करू.
#पृष्ठ (
समास: 36px स्वयं;
रुंदी: 90%;
}
90% निवडले आहे कारण या प्रकरणात आपल्याकडे किनारी बाजूने इंडेंट देखील असतील 5% . तथापि, आपण भिन्न मूल्य निवडू शकता.
आम्ही आमचे सूत्र वापरतो: 900 / 960 = 0.9357
चला परिणामी गुणाकार करू 100 व्याज प्राप्त करण्यासाठी, आणि आम्ही ते आमच्यामध्ये नोंदवू css.
ब्लॉग (
मार्जिन: 0 ऑटो 53px;
रुंदी: 93.75%;
}
तीच गोष्ट स्तंभांसोबत करणे आवश्यक आहे, परंतु संदर्भ बदलला आहे हे लक्षात घ्या. कारण स्तंभ वर्गासह ब्लॉकमध्ये आहेत .ब्लॉग, नंतर तो संदर्भ असेल. चला गणित करूया.
566 ÷ 900 = .628888889
३३१ ÷ ९०० = .३६७७७७७७८
आम्ही प्रत्येक गोष्ट टक्केवारीत रूपांतरित करतो आणि स्टाईल शीटमध्ये लिहितो.
Blog.main (
फ्लोट: डावीकडे;
रुंदी: 62.8888889%;
}
ब्लॉग .साइडबार (
फ्लोट: उजवीकडे;
रुंदी: 36.7777778%;
}
इतकंच! आता आमच्याकडे लवचिक ग्रिड आहे आणि ते लेआउटसाठी वापरू शकतो.
जसे आपण पाहू शकता, सर्वकाही अगदी सोपे आहे. मुळात लवचिक जाळी, लवचिक फॉन्ट प्रमाणे, अजूनही समान सूत्र आहे, जे लक्षात ठेवून, आपण सहजपणे प्रतिसाद देणारी वेबसाइट तयार करू शकता.
नोट!जसे आपण पाहू शकता, आम्ही बर्याच लांब टक्केवारी मूल्यांसह समाप्त केले. काहीजण तुम्हाला त्यांना गोळा करण्याचा सल्ला देऊ शकतात, परंतु तुम्ही हे कधीही करू नये! लक्षात ठेवा!
आणि हे सर्व माझ्यासाठी आहे, तुमचे लक्ष आणि यशस्वी अनुकूली मांडणीबद्दल धन्यवाद!
मला वाटते की लेआउट तयार करण्यासाठी ग्रिड फ्लेक्सबॉक्सपेक्षा श्रेष्ठ आहे हे तुम्हाला आधीच माहित आहे. पण प्रतिसादात्मक मांडणीचे काय? फ्लेक्सबॉक्स किंवा ग्रिड वापरण्यासाठी कोणते चांगले आहे? दोन्ही प्रतिसादात्मक मांडणीसह कार्य करू शकतात. तुम्हाला फ्लेक्सबॉक्स अधिक योग्य वाटेल, शेवटी - फ्लेक्स आयटम ताणू शकतात, संकुचित करू शकतात, दिशा बदलू शकतात इ. परंतु ग्रिडमध्ये प्रत्यक्षात काही नवीन युक्त्या आहेत ज्यामुळे तुमचा प्रतिसाद लेआउटसाठी बराच वेळ आणि त्रास वाचेल.
Minmax फंक्शन
पहिला हुशार आहे नवीन साधनग्रिड, एक मिनमॅक्स फंक्शन जे आम्हाला आमच्या लेआउटमधील स्तंभ आणि पंक्तींसाठी श्रेणी परिभाषित करण्यास अनुमती देते. या उदाहरणात आपल्याकडे संत्रा आहे साइड पॅनेल, आणि आम्हाला रुंदी किमान 100 पिक्सेल हवी आहे, परंतु कंटेनरच्या रुंदीच्या 30% पेक्षा जास्त नाही. कंटेनरची रुंदी 500 पिक्सेल आहे, त्यामुळे आमचा साइडबार आनंदाने 30% (150 पिक्सेल) घेतो.
येथे तंतोतंत समान कोड आहे, परंतु कंटेनरची रुंदी 150px पेक्षा कमी आहे. आता आमचे किमान मूल्यआग लागते आणि नारिंगी साइडबार 100 पिक्सेल पेक्षा लहान नसल्याची खात्री करते.
minmax फंक्शन ज्या प्रकारे कार्य करते ते आश्चर्यकारक आहे, बहुतेक प्रकरणांमध्ये तुम्हाला मीडिया क्वेरी वापरण्याची देखील आवश्यकता नाही.
आम्ही एक समान प्रभाव साध्य करू शकता फ्लेक्सबॉक्स वापरून, पण थोडे लागतात अधिक कामआणि कोड. आम्ही फ्लेक्स-ग्रो, किमान-रुंदी, कमाल-रुंदीचे संयोजन वापरणे आवश्यक आहे:
ग्रिड पद्धत अधिक लवचिक आणि जुळवून घेणे सोपे आहे. कोड जवळजवळ दोन पट कमी आहे.
सर्व घटकांसाठी एक नियम
तुम्हाला अजूनही मीडिया प्रश्नांची आवश्यकता असल्यास, सह ग्रिड लेआउट, ते करणे सोपे आहे. समजा आम्हाला हा लेआउट बदलायचा आहे मोबाइल डिव्हाइसएका स्तंभात. Flexbox सह, आम्हाला किमान रुंदी ओव्हरराइड करण्यासाठी लेआउटमधील प्रत्येक घटक बदलण्याची आवश्यकता असेल. कमाल रुंदीरद्द करण्याची गरज नाही, कारण किमान रुंदीप्राधान्य आहे.
जर तुमच्याकडे सोपी मांडणी असेल, तर हा दृष्टीकोन चांगला कार्य करतो. पण तुमची मांडणी जितकी क्लिष्ट असेल तितकी अधिक घटकमीडिया क्वेरीद्वारे अधिलिखित करणे आवश्यक आहे. ग्रिडच्या मदतीने, ही समस्या सोडवणे खूप सोपे आहे.
मी सुमारे एक वर्षापूर्वी ग्रिड तंत्र लक्षात घेतले. मग हे तंत्र, अतिशय वरवरच्या अभ्यासानंतर, मला निरुपयोगी आणि अतिशय प्रायोगिक वाटले की अंमलबजावणीसाठी अतिरिक्त मार्कअप तयार करणे आवश्यक होते. परंतु आता ग्रिडवर तयार केलेल्या वेबसाइट्सची संख्या, तसेच त्याबद्दलचे लेख आणि ट्यूटोरियल्सची संख्या लक्षात न घेणे कठीण होत आहे. नंतरचे धन्यवाद, तत्त्वे आणि संकल्पना अभ्यासणे आणि समजून घेणे आणि कमी-अधिक वास्तविक निष्कर्ष काढणे खूप सोपे झाले आहे. एका वर्षानंतर माझा निष्कर्ष आहे: “हे सोपे आहे आणि उपयुक्त उपायजे कधीही वेब पृष्ठांच्या मांडणीसाठी तयार केले गेले होते, हे प्रत्येक स्वाभिमानी वेब डिझायनरला माहित असले पाहिजे.”
ज्याने कधीही ग्रिडसह काम केले आहे त्याला ग्रिड म्हणजे काय हे माहित आहे. ग्राफिक संपादक (फोटोशॉप, फटाके, जिम्प इ.)आणि अर्थातच कोणतीही रचना तयार करताना त्याच्या आवश्यकतेचे कौतुक केले. पण वेबवर ग्रिड कसे अंमलात आणायचे? खरं तर टॅब्युलरलेआउट हे ग्रिडसह एक वास्तविक वेब पृष्ठ डिझाइन होते, निःसंशयपणे अतिशय सोयीस्कर. परंतु घटकांचा हेतू वापरण्यासाठी नाही टेबलभयानक होते.
सुदैवाने, वेब मानकांची प्रचंड लोकप्रियता वाढली आहे आणि ती सतत वाढत आहे गेल्या वर्षे, तसेच आधुनिक ब्राउझरमध्ये त्यांच्या समर्थनामुळे, आम्हाला खूप कमी, तार्किक मार्कअपसह बहु-कार्यात्मक पृष्ठे तयार करण्याची संधी दिली. या मांडणीला बोलावण्यात आले ब्लॉक करा. पण ब्लॉक करालेआउट निघाला कमकुवत बाजू. विविध आकार आणि अर्थांच्या घटकांच्या मोठ्या संचासह पृष्ठे तयार करताना, अशा पृष्ठांना चिन्हांकित करणे खूप कठीण काम बनले आहे आणि जर एकापेक्षा जास्त व्यक्ती मार्कअपवर काम करत असतील तर असे काम एक भयानक स्वप्न बनू शकते.
आणि मग ग्रिड वापरण्याचे तंत्र बचावासाठी आले. हे तंत्र दरम्यान एक संकरीत आहे ब्लॉक कराआणि टॅब्युलरमांडणी ते वापरल्याने आम्हाला मिळते:
- विकासाची गती आणि सुलभता
- स्थितीचे स्वातंत्र्य
- पृष्ठ घटक आणि त्यांची नियुक्ती यांचे प्रमाण
ग्रिडसह लेआउट काय आहे? सर्व प्रथम, ही एक संकल्पना आहे. एक संकल्पना ज्यामध्ये अनेक डिझाइन पैलू आणि त्याच्या अंमलबजावणीसाठी काही नियम समाविष्ट आहेत. हे पूर्ण स्वातंत्र्य देते आणि त्याच्या अंमलबजावणीमध्ये कोणतेही मानकीकरण नाही. मी आणखी सांगेन - समान ग्रिड सर्वात जास्त लागू केले जाऊ शकते वेगळा मार्ग. जर तुम्ही आधीच ग्रिडबद्दल वाचले असेल, तर तुमच्या लक्षात आले असेल की प्रत्येक लेखक नवीन कोनातून सुरुवात करतो, तपशीलात खोलवर जातो, हे सौम्यपणे सांगायचे तर गोंधळात टाकणारे आहे. सुदैवाने ते दिसू लागले ग्रिड प्रणाली- ग्रिडसह काम करण्यासाठी CSS लायब्ररी. आणि त्यांचे उदाहरण वापरून, आपण खूप लवकर मास्टर करू शकता मूलभूत तत्त्वेहे तंत्र.
मला असे वाटते की ग्रिडच्या सर्व पैलूंबद्दल लिहिण्यात काही अर्थ नाही; आपण त्याबद्दल इंटरनेटवर सहजपणे माहिती मिळवू शकता. मी सुचवितो की तुमची स्वतःची साधी तयार करा ग्रिड सिस्टम.
प्रथम आपल्याला हे समजून घेणे आवश्यक आहे की ग्रिडमध्ये स्तंभ आणि त्यांच्या दरम्यान रिक्त जागा असतात. तीन मुख्य मूल्ये आहेत - ग्रिडची रुंदी, स्तंभाची रुंदी आणि स्तंभांमधील जागेची रुंदी. स्तंभांची रुंदी त्यांच्या संख्येवर अवलंबून असते.
10 पिक्सेल अंतरासह 16 स्तंभांसह 950 पिक्सेल रुंद ग्रिड बनवण्याचा प्रयत्न करूया, त्यामुळे एक स्तंभ 50 पिक्सेल रुंद असावा. सर्व मूल्ये समजून घेतल्यानंतर, आम्ही आम्हाला ज्ञात असलेले कोणतेही ग्राफिक संपादक उघडतो आणि लेआउट तयार करतो. तुम्ही डावीकडे आणि उजवीकडे ग्रिडमध्ये पॅडिंग देखील जोडू शकता, प्रत्येकी 20 पिक्सेल म्हणा आणि याचा परिणाम 990 पिक्सेलच्या रुंदीसह लेआउटमध्ये होईल. तुम्ही माझे उदाहरण पाहू शकता.
आता आपण आपली लायब्ररी तयार करू शकतो. बऱ्याच CSS लायब्ररींप्रमाणेच आमच्यासाठी जागतिक रीसेटची आवश्यकता आहे, मी एरिक मेयरच्या CSS रीसेटची शिफारस करतो. reset.cssचला तयार करू grid.cssज्यामध्ये आम्ही फ्लोटिंग ब्लॉक्स असलेले कंटेनर साफ करण्याची पद्धत ताबडतोब जोडू शकतो - क्लियर फिक्स. सर्वप्रथम आम्हाला कंटेनरसाठी एक नियम आवश्यक आहे ज्यामध्ये आमचे सर्व स्तंभ असतील. प्रत्येक कंटेनरची रुंदी आमच्या ग्रिडच्या रुंदीइतकी आहे.
.कंटेनर(
मार्जिन: 0 ऑटो;
रुंदी: 950px;
}
आता आपण आपल्या स्तंभांसाठी एक नियम जोडू शकतो, त्यात रुंदी आणि पॅडिंग समाविष्ट आहे. इंडेंट एक अंतर म्हणून कार्य करते (गटर)स्तंभ दरम्यान.
स्तंभ(
फ्लोट: डावीकडे;
समास-उजवे: 10px;
ओव्हरफ्लो: लपलेले;
रुंदी: 50px;
}
हे करण्यासाठी शेवटच्या स्तंभाला इंडेंटेशन आवश्यक नाही, त्यासाठी एक नियम देखील जोडूया:
आमच्या कंटेनरमध्ये स्तंभ आहेत, स्तंभ फ्लोटिंग ब्लॉक्स आहेत, म्हणून ते साफ करावे लागतील. मार्कअपमध्ये अनावश्यक .clearfix टाळण्यासाठी, तुम्ही कंटेनरवर हा नियम लागू करू शकता:
.clearfix: नंतर, .कंटेनर: नंतर{
सामग्री: ".";
प्रदर्शन: ब्लॉक;
उंची: 0;
स्पष्ट: दोन्ही;
दृश्यमानता: लपलेले;
}क्लिअरफिक्स, .कंटेनर(प्रदर्शन: इनलाइन-ब्लॉक;)
/* IE-mac वरून लपवते **/
*html.clearfix, *html.container(उंची: 1%;)
.clearfix, .कंटेनर(प्रदर्शन: ब्लॉक;)
/* IE-mac वरून लपवा समाप्त करा */
आता आपण आपल्या स्तंभांपासून सुरुवात करू शकतो. स्तंभ दोन किंवा तीन रुंद असू शकतात आणि असेच. हे करण्यासाठी, आम्ही त्यांना खालील नियम लागू करू शकतो:
.span-1 (रुंदी: 50px; )
.span-2 (रुंदी: 110px; )
.span-3 (रुंदी: 170px; )
.span-4 (रुंदी: 230px; )
.span-5 (रुंदी: 290px; )
.span-6 (रुंदी: 350px; )
.span-7 (रुंदी: 410px; )
.span-8 (रुंदी: 470px; )
.span-9 (रुंदी: 530px; )
.span-10 (रुंदी: 590px; )
.span-11 (रुंदी: 650px; )
.span-12 (रुंदी: 710px; )
.span-13 (रुंदी: 770px; )
.span-14 (रुंदी: 830px; )
.span-15 (रुंदी: 890px; )
.span-16 (रुंदी: 950px; समास-उजवीकडे: 0; )
तत्वतः, ग्रिड अंमलबजावणीसाठी हे सर्व आवश्यक आहे; आपण लेआउटसह ग्रिड पाहण्यासाठी रॅपर आणि वर्ग देखील जोडू शकता. चला तयार करूया main.cssआणि त्यात जोडा:
.आवरण(
मार्जिन: 0 ऑटो;
रुंदी: 990px;
}
.ओव्हरले(
पार्श्वभूमी: पारदर्शक url(overlay.png) रिपीट-y वर डावीकडे स्क्रोल करा;
}
लेआउट कसा दिसू शकतो ते येथे आहे:
मला वाटते की सुरुवातीसाठी हे पुरेसे आहे.
तुम्ही माझे उदाहरण पाहू शकता
