CSS and design

CSS Grid Generator

Design a CSS grid by drawing items on it, and get clean grid-template and grid-area code.

  • Runs in your browser
  • Instant results
  • Free, no sign-up
Loading the tool…

How to use the CSS Grid Generator

  1. Set the number of columns and rows, their sizes and the gaps.
  2. Drag across empty cells to add an item; click × to remove one.
  3. Copy the CSS and HTML.

Frequently asked questions

What does 1fr mean?

One fraction of the free space. Three 1fr columns share the width equally.

What does grid-area: 1 / 1 / 2 / 3 mean?

Row start / column start / row end / column end, counted in grid lines, so the item spans the first two columns of row 1.

Can items overlap?

Yes. CSS grid allows it; the item that comes later in the HTML is drawn on top.

कोडिंग चैलेंज के साथ Python का अभ्यास करें

सीधे इस एडिटर में प्रैक्टिकल समस्याएँ हल करें: सैंपल टेस्ट चलाएँ, सबमिट करें, और AI कोड रिव्यू पाएं।

सभी Python चैलेंज
आसान

Average of Three

Average three whole numbers.

आप सीखेंगे अंकगणितभाग
BeginnerLearning-pathVariables
आसान

Rectangle Perimeter

Compute the perimeter of a rectangle from its sides.

आप सीखेंगे अंकगणितलौटाए गए मान
BeginnerLearning-pathVariables
मध्यम

जेनेटिक एल्गोरिदम की एक पीढ़ी

टूर्नामेंट चयन, सिंगल-पॉइंट क्रॉसओवर और म्यूटेशन से बिट स्ट्रिंग की अगली पीढ़ी बनाएँ।

आप सीखेंगे जेनेटिक एल्गोरिदमविकासवादी खोज
OptimizationSimulationएआई
अभी तक कोई समाधान नहीं
आसान

एप्सिलॉन-ग्रीडी मल्टी-आर्म्ड बैंडिट

एप्सिलॉन-ग्रीडी क्रिया चयन से मल्टी-आर्म्ड बैंडिट पर खोज और उपयोग के बीच संतुलन बनाएँ।

आप सीखेंगे खोज बनाम उपयोगबैंडिट
रीइन्फ़ोर्समेंट लर्निंगएआईमशीन लर्निंग
अभी तक कोई समाधान नहीं
आसान

मार्कोव चेन का अवस्था वितरण

मार्कोव चेन के ट्रांज़िशन मैट्रिक्स से एक प्रायिकता वितरण को कुछ कदमों तक आगे बढ़ाएँ।

आप सीखेंगे मार्कोव चेनप्रायिकता
Simulationएआईmath
अभी तक कोई समाधान नहीं
मध्यम

वैल्यू इटरेशन

बेलमैन ऑप्टिमैलिटी अपडेट को बार-बार लागू करके मार्कोव निर्णय प्रक्रिया की हर अवस्था का मूल्य निकालें।

आप सीखेंगे बेलमैन समीकरणMDP
रीइन्फ़ोर्समेंट लर्निंगएआईमशीन लर्निंग
अभी तक कोई समाधान नहीं
मध्यम

Q-लर्निंग अपडेट

अनुभवों की धारा पर Q-लर्निंग अपडेट लागू करें और देखें कि इनाम पिछली अवस्थाओं तक कैसे वापस पहुँचते हैं।

आप सीखेंगे Q-लर्निंगडिस्काउंटेड इनाम
रीइन्फ़ोर्समेंट लर्निंगएआईमशीन लर्निंग
अभी तक कोई समाधान नहीं
मध्यम

अल्फ़ा-बीटा प्रूनिंग

मिनिमैक्स और अल्फ़ा-बीटा प्रूनिंग से गेम ट्री का मूल्यांकन करें, और गिनें कि खोज वास्तव में कितनी पत्तियाँ देखती है।

आप सीखेंगे अल्फ़ा-बीटा प्रूनिंगगेम खोज
RecursionTreesएआई
अभी तक कोई समाधान नहीं
मध्यम

मिनिमैक्स टिक-टैक-टो

मिनिमैक्स से पूरे गेम ट्री को खोजकर टिक-टैक-टो की सबसे सही चाल चुनें।

आप सीखेंगे मिनिमैक्सगेम ट्री
Recursionएआई
अभी तक कोई समाधान नहीं
मध्यम

भारित ग्रिड पर A* खोज

गेम और रोबोट के पाथफ़ाइंडिंग के पीछे के खोज एल्गोरिदम A* से भू-भाग लागत वाले ग्रिड में सबसे सस्ता रास्ता खोजें।

आप सीखेंगे A* खोजह्यूरिस्टिक
GraphsGridsShortest-pathएआई
अभी तक कोई समाधान नहीं
मध्यम

टेम्परेचर और टॉप-k सैंपलिंग

भाषा मॉडल की तरह अगला टोकन चुनें: सबसे ऊँचे k logit रखें, टेम्परेचर लगाएँ और सैंपल करें।

आप सीखेंगे टेक्स्ट जनरेशनसैंपलिंग
एआईमशीन लर्निंग
अभी तक कोई समाधान नहीं
कठिन

मल्टी-हेड सेल्फ़-अटेंशन

इनपुट को क्वेरी, की और वैल्यू में प्रोजेक्ट करें, कई हेड में समानांतर अटेंशन चलाएँ और उन्हें जोड़ें।

आप सीखेंगे मल्टी-हेड अटेंशनमैट्रिक्स प्रोजेक्शन
एआईमशीन लर्निंग
अभी तक कोई समाधान नहीं