10 modern layouts in 1 line of CSS
Why Stack Overflow recommends it
Stack Overflow users link it when answering CSS layout questions about centering, aligning and wrapping elements with grid or flexbox, as a quick tour of which technique fits which case.
Recommended by 4 people across 4 different months, 2020 to 2022.
What it is
A conference talk by Una Kravets of the Chrome team, from web.dev LIVE 2020, showing how modern CSS layout features such as grid, flexbox, minmax and place-items can express whole layouts in a single line. It walks through ten compact layout patterns with a companion demo site.
What people said
Recommends Parth · 2020-07 · Stack Overflow · on “How do I display images and their caption horizontally”
Yes. `flex-wrap` is cool. Also, I came across this video earlier today. 1-Line Layouts [this video] Have a look. It shows how to create various types of layouts. It might help you.
Recommends cssyphus · 2020-09 · Stack Overflow · on “Center a div in a 100vh”
Use either flexbox or css-grid for super-easy vertical and horizontal centering. Put the below code on the parent container: display: grid; place-items: center; #welcome-section{ display:grid; place-items: center; border: 1px solid blue;/*temporary for control*/ XXXdisplay: block; <== DISABLED height: 100vh;/*U.S. 10 100% viewport height*/ width: 100vw;/*100% viewport width*/ background-color: red; color: white; } <body> <header id="welcome-section"> <!--U.S. 1--> <div class="hellotext"> <h1>¡Hola! I'm Carlos</h1> <!--U.S. 2--> <h4>text text text</h4> </div> </header> <!--U.S. 1--> </body> The same effect in flexbox can be achieved like this (again, place this CSS on the parent container): d
Recommends Lae · 2021-05 · Stack Overflow · on “Is there a more efficiency way to adjust items in a nav bar than padding-left”
Could you be a little more specific? If you just want to center it horizontally you can just do `margin: 0 auto;` to center it horizontally. Here's how it works [LINK] . I also suggest you look at this video [this video] for some cool CSS tips which will help out a lot.
Recommends suther · 2021-07 · Stack Overflow · on “Align div at bottom of div container”
You can use a grid for that. Change this in your Style on codesandbox.io: .note { background-color: rgb(255, 255, 211); border-radius: 15px; width: 200px; padding: 24px; display: grid; /*flex-direction: column;*/ grid-template-rows: 50px 80px 1fr 80px; /* height: 100%; */ /* align-items: flex-end; */ /* position: relative; */ } .note__actions_bot { background-color: red; height: 100px; display: grid; justify-content: center; align-items: center; } I recommend this awesome Video to get a nice overview and some hint's how to do, and when to use which one of flex, grid and other solutions: [this video]
Cites alex · 2021-06 · Stack Overflow · on “Start new table row every 3 cells”
One of the following techniques could fit the bill: [this video] [this video] RAM (Repeat, Auto, Minmax) .ex7 .parent { display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } <div class="parent white"> <div class="box pink">1</div> <div class="box purple">2</div> <div class="box blue">3</div> <div class="box green">4</div> </div> The Deconstructed Pancake .ex2 .parent { display: flex; flex-wrap: wrap; justify-content: center; } .ex2 .box { flex: 1 1 150px; /* Stretching: */ flex: 0 1 150px; /* No stretching: */ margin: 5px; } <div class="parent white"> <div class="box green">1</div> <div class="box green">2</div> <div class="box green">3</div> </div> (source [LIN
Cites JasSy · 2022-12 · Stack Overflow · on “Center alignment without the need for height”
Seen a few tutorials and doc now. Where its claimed, all you need to do is the following to both horizontally and vertically align a div. .grid { display: grid; place-items: center; } But is not true from what I see. It aligns horizontally but not vertically. For it to align it vertically, you need to add height . .grid { display: grid; place-items: center; height: 500px; } But this is not being dynamic for it to always stay center for any height. height: 100% doesn't work. Am I doing something wrong, or the docs / tutorials are incorrect? Trying this on Edge browser if it matters. <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <style> *