Day 21: Grids 3, 4.

 


.item1 {

  grid-row-start: 1;

  grid-row-end: 3;

}

</style>

</head>

<body>


<h1>Grid Lines</h1>


<div class="grid-container">

  <div class="item1">1</div>

  <div class="item2">2</div>

  <div class="item3">3</div>  

  <div class="item4">4</div>

  <div class="item5">5</div>

  <div class="item6">6</div>

  <div class="item7">7</div>

  <div class="item8">8</div>  

</div>

-----------------------------------------------------------------------------------------------------------------------------

1. CSS grid-template-columns Property :

  • By clicking or hovering over the "grid" button on the grid container element in Inspect element, it is simple to visualize grid configurations. The grid layout is now simple to picture.
  • The number (and widths) of columns in a grid layout are specified by the grid-template-columns property.
  • Each value in the values list, which is separated by spaces, indicates the size of the corresponding column.
  • For additional information on the grid-template-columns property, click the following link 

          https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

  • When an HTML element's display attribute is set to grid or Inline-grid, it transforms into a grid container.
  • By adding display: grid or display: inline-grid to an element, we may construct a grid container. All of that element's direct children turn into grid objects as soon as we do this.
  • To define the start and end of a grid row we can use the following syntax:
      • grid-row : grid row starting number / grid row ending number 

 

  • Example : grid-row : 1/2, will make the item start from column-line 1 and end at column-line 2
  • To define the start and end of a grid column we can use the following syntax:
      • grid-column : grid column starting number / grid column ending number
  • Example : grid-column : 1/3, will make the item start from column-line 1 and end at column-line 3.

 

 

  • Example :
  • Code :

 

<!DOCTYPE html>

<html>

<head>

<style>

    .container {

    display: inline-grid;

    grid-template-columns: auto auto auto;

    background-color: rgb(220, 165, 165);

    padding: 10px;

    }

   

    .item {

    background-color: rgba(255, 255, 255, 0.8);

    border: 1px dashed rgba(63, 187, 200, 0.8);

    text-align: center;

    padding: 20px;

    font-size: 30px;

    }

    .item4 {

        background-color: blueviolet;

        grid-column: 1/3;

    }

   

</style>

</head>

<body>

 

<div class="container">

<div class="item item1">grid item 1</div>

<div class="item item2">grid item 2</div>

<div class="item item3">grid item 3</div>  

<div class="item item4">grid item 4</div>

<div class="item item5">grid item 5</div>

</div>

 

</body>

</html>

 

 

Output :

 

       

 

       

 

  • Inline Grid :

 

    <!DOCTYPE html>

    <html>

    <head>

    <style>

        .container {

        display: inline-grid;

        grid-template-columns: auto auto auto;

        background-color: rgb(220, 165, 165);

        padding: 10px;

        }

       

        .item {

        background-color: rgba(255, 255, 255, 0.8);

        border: 1px dashed rgba(63, 187, 200, 0.8);

        text-align: center;

        padding: 20px;

        font-size: 30px;

        }

    </style>

    </head>

    <body>

   

    <div class="container">

    <div class="item">grid item 1</div>

    <div class="item">grid item 2</div>

    <div class="item">grid item 3</div>  

    <div class="item">grid item 4</div>

    <div class="item">grid item 5</div>

    <div class="item">grid item 6</div>  

    <div class="item">grid item 7</div>

    <div class="item">grid item 8</div>

    <div class="item">grid item 9</div>  

    </div>

   

    </body>

    </html>

 

 

 

Output : 

 

  • Difference between grid and inline-grid :
  • Inline-grid will make the element inline, whereas grid will make it a block-level element. This is the difference between normal grid and inline-grid.

 

  • fr unit :

  By setting the size of a track as a fraction of the available space in the grid container, you can design flexible grid tracks using this non-negative value      given in fr units.

Take a 1000px wide, three-column grid container as an illustration. Consider a layout in which the first (left) column's width is fixed at 200 pixels, the second column occupies one fractional unit, and the third column weighs in at two fractional units:

  • Syntax :

grid-template-columns: 200px 1fr 2fr;



  • repeat() :

The repeat() function is useful  when all the columns are identical.The function takes the number of columns, followed by the column size.

  • Example :

grid-template-columns: repeat(5, 1fr);

Comments

Post a Comment

Popular posts from this blog

else-if condition in if-else statements: Concatenation in JavaScript :

Image
  else-if condition in if-else statements: While specifying conditions for if-else statements, there may arise a need to include more than just two scenarios. For example, suppose we have a variable ‘n’ and we have to check if it is positive or negative. JS code for this problem would look like this: Quite simple, right? However, suppose we twist this problem a bit. If we have to check if the value of ‘n’ is positive, negative, OR zero. Can we do it using only if-else?  No, right? Here comes the scenario where we have to check more than two conditions and give output for each. This is where else-if comes into the game.  Structure of if else-if else looks something like this: If (condition 1)  { statements } else if (condition 2) { statements } else  { statements }   Working for the above code is explained as follows: Condition 1 is checked first. If it is true, statements inside the first block are executed and the remaining conditions are not checked. If t...
Read more

Day 9: CSS - Font Formate

Image
p1{  font style: italic, } p2{ font-variant: small-caps; } p3{ font-weight: 400px: } p4{ font-size: 12pt } p5{ font-family:  } ----------------------------------------------------------------------------------------------------------------------- The CSS font-family Property : The font-family property in CSS is used to specify the typeface of a text.      If the font name has more than one word, such as "Times New Roman," quotation marks must be used.        Example: The following code applies a font family to a paragraph using class ids:I        Code :   Output :     The CSS font-size Property : The font-size attribute controls a font's size.      It has an impact on the text size of an element. Every element can use it, and its default value is medium. This attribute has values like xx-small, small, x-small, etc.      Font-size can also be specified in pixels (which sets the f...
Read more

Day 28: CSS Animation, CSS Transition Animation Box size

Image
------------------------------------------------------------------------------------------------------------------------ <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="styles.css"> <!-- Link to your external CSS file -->   <title>Your Webpage Title</title> </head> <body>   <div class="grad"></div> <!-- Your HTML element with the "grad" class --> </body> </html> @keyframes example {   0% { background-color: red; left: 0px; top: 0px; }   25% { background-color: yellow; left: 200px; top: 0px; }   50% { background-color: blue; left: 200px; top: 200px; }   75% { background-color: green; left: 0px; top: 200px; }   100% { background-color: red; left: 0px; top: 0px; } } .grad {   width: 100px;   heigh...
Read more