The Joy of CSS Grid - Build 3 Beautifully Simple Responsive Layouts
Why Stack Overflow recommends it
Stack Overflow users link it when answering CSS layout questions and want to point askers to a short, practical introduction to grid areas, auto-fit columns and responsive design.
Recommended by 2 people across 2 different months, 2020 to 2021.
What it is
A Fireship tutorial that builds three responsive CSS Grid layouts: a 12-column Bootstrap-style replacement, a mosaic photo gallery, and a staggered animation grid. It is a fast, code-along walkthrough with Bob Ross clips for humor.
What people said
Recommends JSvanBaaren · 2020-06 · Stack Overflow · on “Preventing items in a css grid from stretching to fill space”
You could try something like this. .basic-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) } <section class="basic-grid auto-fit"> <div class="card">1</div> <div class="card">2</div> <div class="card">3</div> <div class="card">4</div> </section> I recommend watching this video to learn a bit more about grids. [this video]
Recommends Maciej Pietrek · 2021-06 · Stack Overflow · on “Position flex div dynamically below another div”
You could use css-grid. Set #main display to grid. Setup grid areas as such #main { display: grid; grid-template-areas: 'chat_bubble character_image' 'button_menu button_menu'; } #character_image { grid-area: character_image; } #chat_bubble { grid-area: chat_bubble; } #button_menu { grid-area: button_menu; } Then in your media query change the layout of your grid @media (max-width: 700px) { #main { grid-template-areas: 'chat_bubble chat_bubble' 'button_menu character_image'; } } You will most likely need to play with other styles to make it flow just how you want, but this way you get the layout you wanted. Checkout Fireship's video [this video] for more detail or ask me for more explanations.
Cites Arun s · 2021-01 · Stack Overflow · on “full screen responsive navbar, image and text”
There are multiple options for ensuring responsive web designing. I will list some of the options which can be used according to your project's need and requirement : Bootstrap : Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.Bootstrap is completely free to download and use . But the problem with bootstrap is its bundle size. If you are looking for way to load you application faster, inclusion of bootstrap can increase the initial load time . It will take around 60.9kB extra to your application bundle when minified . [LINK] Zurb foundation : Similar to bootstrap , with a decent developer community and has most of the feature