DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to Change the Order in Grid?
Zain Muhammad
Zain Muhammad

Posted on

How to Change the Order in Grid?

We can change the grid order using simple css3 keyword order .check the code snippet below.


<!DOCTYPE html>
<html>
<head>
<title>Change Grid Order</title>
<style>
.order-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 3%;
}
.order-grid .section-one,.order-grid .section-two{
    width:100%;
    font-size:20px;
    font-weight:600;
    text-align:center;
    color:#ffffff;
    padding:50px 0px;
}
.order-grid .section-one{
    background: brown;
    order:2;
}
.order-grid .section-two{
    background: red;
    order:1;
}
</style>
</head>
<body>

<div class="order-grid">
  <div class="section-one">grid one</div>
  <div class="section-two">grid two</div>
</div>

</body>
</html>`
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
awaiscb profile image
Awais

informative snippet.

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.