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'));