Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: CSS Grid

  1. #1
    New Coder
    Join Date
    Jul 2015
    Posts
    32
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS Grid

    I have been trying to learn CSS Grid, and so far i have been able to produce three columns and two rows. But for some reason i cannot get the whitespace 'grid: gap', to appear.
    Could someone help me out here please.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    	<title>CSS Grid Basics</title>
    
    	<meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    	<style>
    
    		* {
    			margin: 0px;
    			padding: 0px;
    		}
    
    		.container {
    			display: grid;
    			grid-template-columns: 1fr 2fr 1fr;
    			grid-template-rows: 100px 100px;
    			background-color: DodgerBlue;
    			grid-gap: 5px;
    		}
    
    	</style>		
    
    </head>
    
    <body>
    
    		<div class="container">
    
    			<div class="item">1</div>
    			<div class="item">2</div>
    			<div class="item">3</div>
    			<div class="item">4</div>
    			<div class="item">5</div>
    			<div class="item">6</div>
    
    		</div>
    
    </body>
    
    </html>

  2. #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,426
    Thanks
    3
    Thanked 597 Times in 583 Posts
    Hi there Colin52,

    does this help...

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>CSS Grid Basics</title>
    
    <style media="screen">
    * {
        margin: 0;
        padding: 0;
     }
    body {
        background-color: #f9f9f9;
        font: 100% / 162% verdana, arial, helvetica, sans-serif;
     }
    .container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 6.25em 6.25em;
        gap: 0.31em;
    		}
    .container > div {
        padding: 1em;
        background-color: #1e90ff;
     }
    </style>		
    
    </head>
    <body>
    
     <div class="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
     </div>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

  3. #3
    New Coder
    Join Date
    Jul 2015
    Posts
    32
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I shall study and learn the above code so that i won't be stuck again.
    Could you recommend a CSS Grid tutorial suitable for noobs like myself?
    Hope you had a merry christmas and shall have a prosperous new year.
    Big thanks coothead.

  4. #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,426
    Thanks
    3
    Thanked 597 Times in 583 Posts
    Hi there colin52,

    actually, I've had very little practice with "CSS grid"
    but for all coding references I normally go to...


    ...and in your particular case...


    coothead
    ~ the original bald headed old fart ~

  5. #5
    New Coder
    Join Date
    Jul 2015
    Posts
    32
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hiya coothead

    I've already saved the CSS Grid Layout link you have given.
    Big thanks for all the help and advice.

    Regards colin52

  6. #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,426
    Thanks
    3
    Thanked 597 Times in 583 Posts

    No problem, you're very welcome.

    coothead
    ~ the original bald headed old fart ~


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •