Responsive Grid Layout

This example creates a simple responsive grid layout using CSS grid.

jsxCopy codeimport React from 'react';
import ReactDOM from 'react-dom';

function GridLayout() {
  return (
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))', gap: '10px' }}>
  {Array.from({ length: 20 }, (_, index) => (
    <div key={index} style={{ background: '#ccc', padding: '20px', textAlign: 'center' }}>
      Item {index + 1}
    </div>
  ))}
</div>
  );
}

ReactDOM.render(<GridLayout />, document.getElementById('root'));