Search With Seek4Info.com
Welcome to collectivesolver - Programming & Software Q&A with code examples. A website with trusted programming answers. All programs are tested and work.

Contact: aviboots(AT)netvision.net.il

Semrush - keyword research tool

Turn ChatGPT, Claude, Gemini, And CoPilot Into Your Personal Assistant, Business Coach, Content Creator, And More

Secure & Reliable Web Hosting, Free Domain, Free SSL, 1-Click WordPress Install, Expert 24/7 Support

Boost your online presence with premium web hosting and servers

Children Learning Reading Phonics Foundations Reading Program

Most popular tags

python java c c# cpp javascript php vb# typescript nodejs go rust scala swift kotlin pascal html dart ruby r css bootstrap win32 groovy winapi sql mysql jquery pascal-string lua winforms kotlin-string bash swift-string c-string cpp-string go-string c#-string php-string java-string vbnet-string rust-string python-string cpp-vector f# opengl scala-string javascript-string pascal-array c-array swift-array cobol typescript-string vbnet php-array javascript-array rust-vector typescript-array python-list reactjs scala-array c-windows nodejs-string go-array kotlin-array nodejs-array sdl2 cpp-matrix c-matrix cpp-array c#-list vbnet-list pascal-matrix go-slice c#-array java-array nodejs-express character-code-ascii-unicode swift-matrix c#-matrix sdl3 angularjs generate-random-floating-point-numbers all-permutations-combinations kotlin-matrix typescript-matrix vbnet-array kotlin-list string-to-title-case create-infinite-loop rust-matrix go-matrix javascript-matrix raylib glfw dot-product-two-arrays represent-boolean-true-false different-functions-check-number-power-of-2 get-last-word-string remove-last-word-string
Disclosure: My content contains affiliate links.

40,755 questions

53,120 answers

573 users

How to defines the number of columns in grid layout with CSS



365 views
asked Jun 4, 2019 by avibootz
Share on
share on gp share on fb share on tw share on li share on re share via email

3 Answers

0 votes 
<!DOCTYPE html> 
<html> 
    <head> 
        <style>
            .grid-container {
                display: grid;
                grid-gap: 10px;
                /* 4 columns */
                grid-template-columns: auto auto auto auto; 
                background-color: blue;
                padding: 10px;
            }
            .grid-container > div {
                background-color: lightblue;
                border: 1px solid;
                padding: 15px;
            }
        </style>
    </head> 
    <body> 
        <div class="grid-container">
            <div class="grid-item">A</div>
            <div class="grid-item">B</div>
            <div class="grid-item">C</div> 
            <div class="grid-item">D</div>
            <div class="grid-item">E</div>
            <div class="grid-item">F</div> 
            <div class="grid-item">G</div>
            <div class="grid-item">H</div>
        </div>
    </body> 
</html>

 



answered Jun 4, 2019 by avibootz
0 votes 
<!DOCTYPE html> 
<html> 
    <head> 
        <style>
            .grid-container {
                display: grid;
                grid-gap: 10px;
                /* 3 columns */
                grid-template-columns: auto auto auto; 
                background-color: blue;
                padding: 10px;
            }
            .grid-container > div {
                background-color: lightblue;
                border: 1px solid;
                padding: 15px;
            }
        </style>
    </head> 
    <body> 
        <div class="grid-container">
            <div class="grid-item">A</div>
            <div class="grid-item">B</div>
            <div class="grid-item">C</div> 
            <div class="grid-item">D</div>
            <div class="grid-item">E</div>
            <div class="grid-item">F</div> 
            <div class="grid-item">G</div>
            <div class="grid-item">H</div>
        </div>
    </body> 
</html>

 



answered Jun 4, 2019 by avibootz
0 votes 
<!DOCTYPE html> 
<html> 
    <head> 
        <style>
            .grid-container {
                display: grid;
                grid-gap: 10px;
                /* 4 columns */
                grid-template-columns: 100px 300px auto 50px; 
                background-color: blue;
                padding: 10px;
            }
            .grid-container > div {
                background-color: lightblue;
                border: 1px solid;
                padding: 15px;
            }
        </style>
    </head> 
    <body> 
        <div class="grid-container">
            <div class="grid-item">A</div>
            <div class="grid-item">B</div>
            <div class="grid-item">C</div> 
            <div class="grid-item">D</div>
            <div class="grid-item">E</div>
            <div class="grid-item">F</div> 
            <div class="grid-item">G</div>
            <div class="grid-item">H</div>
        </div>
    </body> 
</html>

 



answered Jun 4, 2019 by avibootz

Related questions

1 answer 242 views
242 views
How to define the number of columns in grid layout with CSS
asked Jun 4, 2019 by avibootz
1 answer 313 views
313 views
How to create grid with columns gap in CSS
asked Jun 3, 2019 by avibootz
1 answer 272 views
272 views
How to use grid with minmax() function in CSS
asked Jun 5, 2019 by avibootz
 | Search With Seek4Info.com
Powered by Question2Answer
...