CSS Grid શું છે?
CSS Grid Layout એ આધુનિક બ્રાઉઝર્સમાં બિલ્ટ-ઇન દ્વિ-પરિમાણીય લેઆઉટ સિસ્ટમ છે. display: grid વાપરીને ગ્રિડ કન્ટેઇનર વ્યાખ્યાયિત કરો, પછી grid-template-columns વડે કૉલમ્સ અને grid-template-rows વડે પંક્તિઓ નિયંત્રિત કરો. અપૂર્ણ એકમો (fr) ઉપલબ્ધ જગ્યા પ્રમાણસર વહેંચે છે. ચાઇલ્ડ આઇટમ્સ grid-column: span N અને grid-row: span N વાપરીને ઘણી કૉલમ્સ અથવા પંક્તિઓ ફેલાવી શકે છે.
CSS Grid જનરેટર કેવી રીતે વાપરવું
-
નંબર ઇનપુટ્સ (દરેક 1–12) વાપરીને કૉલમ્સ અને પંક્તિઓની સંખ્યા સેટ કરો.
-
કદ નિયંત્રિત કરવા grid-template-columns અને grid-template-rows ગોઠવો (દા.ત. 1fr 2fr, 200px auto).
-
સેલ્સ વચ્ચે અંતર સેટ કરો (દા.ત. 10px, 1rem).
-
પ્રિવ્યૂમાં કોઈ પણ સેલ ક્લિક કરો (નારંગી થઈ જાય છે).
-
સેલ સ્પાન પૅનેલમાં col-span અને row-span સેટ કરો, પછી લાગુ કરો ક્લિક કરો. સ્પાન કરેલ સેલ લીલા થઈ જાય છે.
-
આઉટપુટ ફૉર્મૅટ બદલવા CSS અથવા HTML ટૅબ ક્લિક કરો, પછી ક્લિપબૉર્ડ પર કૉપિ કરો.
-
નવા 3×3 ગ્રિડ સાથે ફરીથી શરૂ કરવા બધું રીસેટ કરો ક્લિક કરો.