CODEWITHSUNDEEP
cssreactjs
czroo
czroo

Reputation: 157

How do i reorder divs on reactjs

how to reorder the divs at css or other ways?
by this it display in 1 column

<div className='allitem'>  
                <div className='item1'>
                    <h3>test1</h3>                     
                </div>

                <div className='item2'>
                    <h3>test2</h3>           
                </div>

                <div className='item3'>
                    <h3>test3</h3>             
                </div>
                
                <div className='item4'>
                    <h3>test4</h3>             
                </div>
            </div>
        </div>

the result i would like :

test1   test2
test3   test4

Upvotes: 4

Views: 593

Answers (1)

Drew Reese
Drew Reese

Reputation: 202668

You could use a grid layout on the outer parent div. The simplest layout is to define 2 columns.

.allitem {
  display: grid;
  grid-template-columns: 1fr 1fr;
}


function App() {
  return (
    <div className="allitem">
      <div className="item1">
        <h3>test1</h3>
      </div>

      <div className="item2">
        <h3>test2</h3>
      </div>

      <div className="item3">
        <h3>test3</h3>
      </div>

      <div className="item4">
        <h3>test4</h3>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);
.allitem {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Upvotes: 1

Related Questions