CSS Grid: Create a Column Gap Using grid-column-gap And Row Gap using grid-row-gap And Use grid-gap For Row And Coulmn Gap

Sometimes you want a gap in between the columns. To add a gap between the columns, use the grid-column-gap property like this: in the container div
    grid-column-gap: ;


1
2
3
4
5

html code  


 






<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-column-gap: 20px;    
  }
</style>
  
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>








You can add a gap in between the rows of a grid using grid-row-gap in the same way that you added a gap in between columns  above




  






1



2



3



4



5



html code 




<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-row-gap :5px;
  }
</style>
  
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>








grid-gap is a shorthand property for grid-row-gap and grid-column-gap that's more convenient to use.

If grid-gap
 has one value, it will a create a gap between all rows and columns. 
However, if there are two values, it will use the first one to set the 
gap between the rows and the second value for the columns.



Here I used grid-gap to introduce a 10px gap between the rows and 20px gap between the columns.













1



2



3



4



5



html code 






<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap:10px 20px;
    
  }
</style>
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>




source 









































Comments











Post a Comment
























Popular posts from this blog









ES6 : 5  Prevent Object Mutation





















  As seen in the previous post  declaration alone doesn't really protect your data from mutation. To  ensure your data doesn't change, JavaScript provides a function Object.freeze()  to prevent data mutation.   Once  the object is frozen, you can no longer add, update, or delete  properties from it. Any attempt at changing the object will be rejected  without an error.     let obj = {  name:"FreeCodeCamp"  review:"Awesome"  };  Object.freeze(obj);  obj.review = "bad"; //will be ignored. Mutation not allowed  obj.newProp = "Test"; // will be ignored. Mutation not allowed  console.log(obj);  // { name: "FreeCodeCamp", review:"Awesome"}   








Read more










ES6: 1 Explore Differences Between the var and let Keywords





















 One of the biggest problems with declaring variables with the var  keyword is that you can overwrite variable declarations without an error.    var camper = 'James';  var camper = 'David';  console.log(camper);  // logs 'David'    As you can see in the code above, the camper  variable is originally declared as James  and then overridden to be David .   In  a small application, you might not run into this type of problem, but  when your code becomes larger, you might accidentally overwrite a  variable that you did not intend to overwrite.   Because this behavior does not throw an error, searching and fixing bugs becomes more difficult.   A new keyword called let  was introduced in ES6 to solve this potential issue with the var  keyword.   If you were to replace var  with let  in the variable declarations of the code above, the result would be an error.       let camper = 'James';  let camper = 'David'; // throws an error    This error can be seen...








Read more










CSS Grid: Reduce Repetition Using the repeat Function





















  When we used grid-template-columns  and grid-template-rows  to define the structure of a grid, you entered a value for each row or column you created.   Lets say you want a grid with 100 rows of the same height. It isn't very  practical to insert 100 values individually. Fortunately, there's a  better way - by using the repeat  function to specify the  number of times you want your column or row to be repeated, followed by a  comma and the value you want to repeat.     Here's an example that would create the 100 row grid, each row at 50px tall.      grid-template-rows: repeat(100, 50px);    You can also repeat multiple values with the repeat  function, and insert the function amongst other values when defining a  grid structure. Here's what I mean:     grid-template-columns: repeat(2, 1fr 50px) 20px;    this will be translated to :               grid-template-columns:1fr 50px 1fr 50px  20px;       1fr 50px  is repeated t...








Read more