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.