क्या छवियों या तालिकाओं के बिना सीएसएस में ग्रिड जैसी पृष्ठभूमि बनाना संभव है?

Question

मैं ऐसी पृष्ठभूमि बनाना चाहता हूं जो एक्सेल स्प्रेडशीट की तरह कुछ दिखता हो। प्रत्येक टेबल के चारों ओर सफेद टेबल कोशिकाएं, पतली सीमाएं। मुझे पता है कि यह एक छवि के साथ आसानी से कैसे करना है, और मुझे पता है कि टेबल के साथ ऐसा कैसे करें ... लेकिन यदि संभव हो तो मैं बिना किसी के इसे करना चाहूंगा।

प्रत्येक कोशिका के आकार 20x20 पर तय किया जाएगा, ताकि मैं आकार बदलने के बारे में चिंता करने की जरूरत नहीं है। कोई विचार? मैं तरह से पकाया गया था जिसमें आंतरिक मार्कअप का एक टन शामिल था, लेकिन मुझे लगा कि एक टेबल का उपयोग करने के रूप में लगभग उतना ही बुरा था।

इस पृष्ठभूमि का उद्देश्य उपयोगकर्ताओं को एक ग्रिड पर ब्लॉक की व्यवस्था करने के लिए अनुमति दी जाएगी। JQuery UI की ड्रैग और ड्रॉप कार्यक्षमता का उपयोग करके, मैं चाहता हूं कि उपयोगकर्ता एक सीमित ग्रिड के भीतर ब्लॉक को स्थानांतरित करने में सक्षम हो। ग्रिडलाइन बस उन्हें दिखाएंगे जहां ग्रिड में उनके ब्लॉक बाध्य हैं। इस ग्रिड (ग्रिडलाइनें के बिना) तड़क का एक उदाहरण http://jqueryui.com/demos/draggable/#snap-to

Answer 1

एक पृष्ठभूमि छवि का उपयोग करें पर उपलब्ध है; मार्कअप के साथ अपने समय fiddling बर्बाद मत करो। आप इस के अलावा कोई और अधिक कुशल प्राप्त करने के लिए नहीं जा रहे हैं:

background:url(data:image/gif;base64,R0lGODlhFAAUAIAAAMDAwP///yH5BAEAAAEALAAAAAAUABQAAAImhI+pwe3vAJxQ0hssnnq/7jVgmJGfGaGiyoyh68GbjNGXTeEcGxQAOw==); 

Example।

Answer 2

मैं इस समस्या के लिए भी खोज की है और मैं एक very good solution पाया:

background-size: 40px 40px;  
background-image:repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 1px, transparent 40px),repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 1px, transparent 40px); 

ग्रिड आकार बदलने के लिए, पृष्ठभूमि आकार और ढाल के भीतर पिछले पिक्सल विकल्प बदल जाते हैं। ग्रिड चौड़ाई बदलने के लिए ढाल के भीतर पहला पीएक्स विकल्प बदलें। पहला ढाल क्षैतिज है, दूसरा लंबवत रेखाओं के लिए है।

position: absolute 

आवश्यक था:

इस डेमो के लिए मुझे लगता है कि सीएसएस विकल्प को मान्यता दी। मैं अब अपना ग्रिड तैयार करूंगा और यदि मुझे और जानकारी मिलती है तो मैं उन्हें एक टिप्पणी के भीतर जोड़ दूंगा।

आशा इस मदद करता है :)