CSS Articles - Page 109 of 160

To create a transition effect on hover pagination, use the transition property.ExampleYou can try to run the following code to add transition effect −Live Demo                    .demo {             display: inline-block;          }          .demo a {             color: red;             padding: 5px 12px;             text-decoration: none;             border-radius: 5px;             transition: background-color 2s;          }          .demo a.active {             background-color: orange;             color: white;             border-radius: 5px;          }          .demo a:hover:not(.active) {             background-color: yellow;          }                     Our Quizzes                          

The grid-template-columns property is used to set the number of columns in the Grid.ExampleYou can try to run the following code to implement the grid-template-columns property −Live Demo                    .container {             display: grid;             background-color: blue;             grid-template-columns: auto auto;             padding: 20px;             grid-gap: 20px;          }          .container > div {             background-color: orange;             border: 2px solid gray;             padding: 35px;             font-size: 30px;             text-align: center;          }                     Game Board                1          2          3          4          5          6          

You can try to run the following code to style pagination with CSSExampleLive Demo                    .demo {             display: inline-block;          }          .demo a {             color: red;             float: left;             padding: 7px 10px;               text-decoration: none;          }                     Our Quizzes                          

You can try to run the following code to vertically align the grid using the align-content property −ExampleLive Demo                    .container {             display: grid;             background-color: gray;             align-content: center;             padding: 20px;             grid-gap: 20px;          }          .container > div {             background-color: orange;             border: 2px solid gray;             padding: 35px;             font-size: 30px;             text-align: center;          }                     Game Board                1          2          3          4          5          6          

Align flex lines with CSS align-content property. You can try to run the following code to implement the align-content property. It adds space around the items:ExampleLive Demo                    .mycontainer {             display: flex;             background-color: orange;             align-content: space-between;             height: 150px;             width: 600px;             flex-wrap: wrap;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          

Use the align-items property with value flex-start to align flex items on the top.ExampleYou can try to run the following code to implement the flex-start value −Live Demo                    .mycontainer {             display: flex;             height: 300px;             background-color: red;             align-items: flex-start;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          

Use the justify-content property with value flex-end to align the flex-items at the end.ExampleYou can try to run the following code to implement the flex-end value −Live Demo                    .mycontainer {             display: flex;             background-color: red;             justify-content: flex-end;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Quiz             Q1       Q2       Q3       Q4          

Use the justify-content property with value flex-start to align the flex-items at the beginning.ExampleYou can try to run the following code to implement the flex-start value −Live Demo                    .mycontainer {             display: flex;             background-color: red;             justify-content: flex-start;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          

You can try to run the following code to align the grid inside the container using the justify-content property:ExampleLive Demo                    .container {             display: grid;             background-color: gray;             grid-template-rows: 120px 90px 100px;             justify-content: space-evenly;             padding: 20px;             grid-gap: 20px;          }          .container > div {             background-color: yellow;             border: 2px solid gray;             padding: 35px;             font-size: 30px;             text-align: center;          }                     Game Board                1          2          3          4          5          6          

You can try to run the following code to create a responsive pagination with CSSExampleLive Demo                    .demo {             display: inline-block;          }          .demo a {             color: blue;             float: left;             padding: 3px 8px;             text-decoration: none;          }                     Our Quizzes