क्या वेबकिट के लिए CSS3 ग्रिड लेआउट का कामकाजी कार्यान्वयन है?

Question

CSS Grid Layout, Editor’s Draft, 21 November 2011

मैं एक प्रोटोटाइप है कि चयनित डिवाइस और ब्राउज़र पर ग्राहक को दिखाया जाएगा उत्पादन के बीच में हूँ। मैं इस समय क्रॉस-ब्राउज़र संगतता के बारे में चिंतित नहीं हूं।

IE10 डेवलपर पूर्वावलोकन निम्नलिखित है:

display: -ms-grid; 
-ms-grid-columns: ; 
-ms-grid-rows: ; 
-ms-grid-column: ; 
-ms-grid-row: ; 
-ms-grid-row-align: stretch; 
columns: ; 
column-fill: auto; 
column-gap: ; 

मोज़िला ऊपर के समान होने (मैं परीक्षण नहीं किया है कि क्या यह, काम करता है अभी तक) को eludes। हालांकि, एक बहुत अलग कार्यान्वयन करने में समस्या होती वेबकिट:

display: -webkit-box; 
-webkit-columns: ; 
-webkit-column-gap: ; 

अब, वेबकिट एक ही विनिर्देश उपयोग कर रहा है, या एक पूरी तरह से अलग मॉडल के लिए है? यह एक ही विनिर्देश उपयोग कर रहा है, तो आप मुझे बता सकते हैं क्या वाक्य रचना के लिए है:

grid-columns: ; 
grid-rows: ; 
grid-column: ; 
grid-row: ; 

और, यदि यह एक अलग मॉडल का उपयोग कर रहा है, तुम मुझे पता है कि वाक्य रचना है तो कृपया सकता है और यह कैसे से अलग है एमएस ई 10। संदर्भों की सराहना की जाएगी।

यह ध्यान देने योग्य है कि मेरे पास Google क्रोम कैनरी स्थापित है, साथ ही वेबकिट पर ग्रिड का परीक्षण करने के लिए सफारी का नवीनतम संस्करण भी है।

Answer 1

http://caniuse.com/css-grid

मार्च 2017 की स्थिति के अनुसार काफी कुछ ब्राउज़रों अब सीएसएस ग्रिड लेआउट का समर्थन:

---

वर्ष जवाब:

वहाँ, कार्यों में कुछ यहाँ इसके कार्यान्वयन के लिए पूर्ण मुद्दा पेड़ है:

https://bugs.webkit.org/showdependencytree.cgi?id=60731&hide_resolved=0

यहाँ this file से कुछ सीएसएस है:

.gridWithFixed { 
    display: -webkit-grid; 
    -webkit-grid-columns: 7px 11px; 
    -webkit-grid-rows: 17px 2px; 
} 

आप आशय देख सकते हैं। दुर्भाग्यवश, वे केवल सीएसएस को पार्स करने के लिए ही मिल गए हैं।

तो, ऐसा लगता है कि अभी वेबकिट के लिए इसका कोई कार्यान्वयन नहीं है।

जबकि Grid Layout बहुत खराब समर्थन है, Flexbox में सभ्य समर्थन (जाहिर है, आईई 10 सहित) है। मेरा सुझाव है कि आप इसके बजाय फ्लेक्सबॉक्स का उपयोग करें।

Answer 2

Chrome CanaryCSS Grid Layout TR 20130910 लागू करता है। मुझे कुछ संपत्ति नामों में मामूली अंतर मिला है। स्टीवन ब्रैडली summarizes the TR और ग्रिड लेआउट का उपयोग शुरू करने के तरीके के लिए instructions and examples प्रदान करता है। कैनरी में प्रयोगात्मक सुविधाओं को सक्षम करने के लिए, निम्नलिखित को एड्रेस बार में कॉपी करें और पेस्ट करें

chrome://flags/#enable-experimental-web-platform-features 

और 'सक्षम' पर क्लिक करें।