Name: How to Change the Order in Grid?
Rating: 2.2 (6152 reviews)
Author: zainmuhammad

How to Change the Order in Grid?

Zain Muhammad - Dec 27 '21 -

- Dev Community

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>`