Example: Grid responsive (grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));)

Child-1

Child-2

Child-3

Child-4

Child-5

Child-6


Lorem ipsum dolor sit amet.

sidebar always 200px but when sidebar display:none main content width automaticaly will be 100%.


Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius, recusandae? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate est harum odio deleniti reiciendis porro doloremque expedita natus saepe molestiae! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, ipsum.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius, recusandae? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate est harum odio deleniti reiciendis porro doloremque expedita natus saepe molestiae! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, ipsum.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius, recusandae? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate est harum odio deleniti reiciendis porro doloremque expedita natus saepe molestiae! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, ipsum.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius, recusandae? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate est harum odio deleniti reiciendis porro doloremque expedita natus saepe molestiae! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, ipsum.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae tempora quod nam cum, iure aliquam rem dolores consectetur officia nobis!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae tempora quod nam cum, iure aliquam rem dolores consectetur officia nobis!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae tempora quod nam cum, iure aliquam rem dolores consectetur officia nobis!