CSS Flexbox Tutorial #11 - Grid vs Stacked Layout Example
Вставка
- Опубліковано 9 лют 2025
- Yo ninjas, in this CSS Flexbox tutorial, I'll walk through creating a grid and stacked layout, which the user can toggle between.
----- COURSE LINKS:
Source files on GitHub - github.com/iam...
Brackets editor - brackets.io/
---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...
SUBSCRIBE TO CHANNEL - / @netninja
========== JavaScript for Beginners Playlist ==========
• JavaScript Tutorials f...
============ CSS for Beginners Playlist =============
• CSS Tutorials For Begi...
============== The Net Ninja =====================
For more front-end development tutorials & to black-belt your coding skills, head over to - / @netninja or thenetninja.co.uk
================== Social Links ==================
Twitter - @TheNetNinja - / thenetninjauk
"box-sizing: border-box" was an aha! moment for me! Thanks man.
Your CSS Tutorials are the best online. Love your delivery. You understand how to communicate a thought in a live way (not lousy and rambling). Excellent work.
Wow, that escalated quickly. I was going alright up to lesson 10. Challenge accepted though. You are a fantastic teacher.
All the 12 tutorials are excellent. I got a nice idea on how the flex properties work. Thanks a lot for posting these videos! It is very helpful.
Here's the Javascript code to replace the JQuery (apparently shouldn't be used for new projects). A week ago I wouldn't have had a clue how to do this, but by following many of the Grand Master Ninja courses my skills are improving dramatically, wax on wax off!!!
const stack = document.querySelector("a.stack");
stack.addEventListener("click", e => {
const articles = document.querySelectorAll("article");
articles.forEach(article => article.classList.add("stack"));
});
const grid = document.querySelector("a.grid");
grid.addEventListener("click", e => {
const articles = document.querySelectorAll("article");
articles.forEach(article => article.classList.remove("stack"));
});
This can also be done using CSS only but needs a few changes to the HTML too.
Remove the div class="controls".
Add:
Layout:
to the beginning of the
No need for the tag too, so remove it.
In the "mobile" CSS add:
#layout, #layout-label {
display: none;
}
In the CSS add the following in the @media query:
#layout-label {
display: block;
flex: 0 0 100%;
margin: 20px 0;
padding: 10px 0;
background: darkgray;
text-align: center;
}
#layout-label::after {
content: " Grid"
}
#layout:checked ~ #layout-label::after {
content: " Stack"
}
#layout:checked ~ article {
flex: 0 1 100%;
}
No need for any of the .controls CSS so that can be removed.
It's great trying to get things to work using CSS only if possible IMO.
I was wondering why my script wasn't working :(
This was really helpful. That’s a lot. It finally worked thanks to you❤
Happily shouting “wahhh” in the ninja’s voice just as every tutorial is about to start. 😂❤
This is excellent, thank you. I love the stack and grid bit. A bit of extra styling takes away the Layout: Stack and Grid option on mobile and brings it back on 768px.
What style would do that?
Hello. I can't remember what I did yesterday, never mind 3 years ago. I will try to find it, but don't hold your breath.
Your videos are pretty awesome dude...Keep up the good work!
Good day Mr shaun, i followed everything you did here, but when i click on grid or stack it changes for a split second then i receive an error message.
This: Cannot GET /example-3/%C2%A3
really enjoyed this. straight forward and fast.
luuuurve your tutorials! Always some extra polish! Thanks
Cool example!
great tutorials all over. TY man
Awesome Tutorials as always +++++++++ thank you 🙂🙂
once again, so helpful. Thanks
i will start learning jquery next week but it was good tutorial :-)
wow this is very practical, thank you a ton
Thank you so much. You're great as ever. Thank you.
jquery is too advance for my noob self!! D'x Otherwise love your tutorials! Thank you so much for making them!!
Great, so helpful, thank you very much!
Can you help, how to be if we have eight blocks in two rows. And when we reduce screen they transform in three rows, and the last row consist just of two blocks on the sides of the screen with a space between them. Thank you
Excellent!!! :)
Thanks man for all tutoriall you are makeing :) I subscribe today :)
oh damn , that is beautiful thank you
How do you make it to be selected in the browser when you go over an element in the editor?
Great video - thanks!
Thumbs up! What if I want to add image at the top of each articles either stacked or grid? Thanks.
Very nice. thanks
Can anyone tell me what is the problem that i am doing as in my case when i click stack it just happens so quick and go back to grid and i m not able to identify what is the problem
Please can anyone help me
Nice tuth bro!
when im shrinking the browser size the layout doesn't change to stack automaticaly. where's the catch ?
How to I get this to scale down from 3 columns to 2 and then 1? As opposed to scaling from 3 columns to 1?
When u have 5 article box. justify-content:space-between; creates huge space between the last two artcle boxes. How to get rid of this issue??
use margin property instead of justify-content
Cool! Thank you!)
thanks for sharing this
Thanks a million, These series are very helpful for me .. I try to watch them all and practice. but one question ( I asked in grid tutorial too, but since then no body answered me and I just couldn't make myself clear to google and find my answer in it :D ) what do you use that specifies the element in browser? I mean, where does that blue border or blue background come from whenever you click on an element tag?.... I Think That is very helpful for someone like me, a Total Beginner.
It's from his code editor
@@elpontador9826Thanks for your reply, Then I just decided to use brackets instead of VS-Code, because of this feature! seems really cool
Hey Ninja Master, Quick question, can you tell me what the vscode extension you are using to highlight the section of the browser your in when you click on the section in the vscode side. When you highlight or click on the p tag its highlights it in the browser. Many Thanks Vaughan
I am pretty sure he is using "Atom" not "VSCode"
@@Kirisapostle12 he is using brackets ( brackets.io/) and it has a live server extension
the jquery is not working what should i do. This is the error its reading:
Uncaught TypeError: $(...).removeclass is not a function
at HTMLAnchorElement. (grid-vs-stack.html:64)
at HTMLAnchorElement.dispatch (jquery-1.12.1.js:5226)
at HTMLAnchorElement.elemData.handle (jquery-1.12.1.js:4878)
ok found the problem. Sorry!
@@jojo_koomsoncan you pls help me out on my script its not working kept bringing not defined on the console
I got lost on the "jquery" part... like "what? where did we see that?" hehehe, but I got the sintaxis.
Why is my script not working cam someone pls help me out
Kept saying not defined
If one wants to remove the content of the div(Layout: Stack and grid) when it gets to the mobile view how do one go about it
use the media query to resize it to 0 or something like that
sometimes i have the urge to click Like button many times:)
which plugin you are using to highlight blocks on browser? I mean real time when you are editing on CSS.
it's the text-editor life view you can download it at brackets.io
Hi, how make masonry grid with flex?
top class
why are you shrinking them in this case?
what text editor is that?
does anyone know what plugin he is using to see his changes in real time?
this is an option in Brackets. Just click the horizontal lighning icon in right top corner. Then the Chrome will open with you site.
miszka do you know of one for Atom? it's what i am using right now and i kind of prefer it thanks
atom live server plugin -> atom.io/packages/atom-live-server
Maybe a stupid question but in Atom I do not see an option to launch an html file in the browser. Ie in notepad++ theres is an option to 'launch in browser', thank you.
excellent but i think i need to learn javascript soon
1 piece of advice. Learn JS from the ground up before going anywhere near libraries like jQuery. For years when vanilla JS was a bit crap, people like me ended up sort of learning the 2 in parallel and getting confused.
Why type #fff instead of "white"?
in css its
div.stack{
flex:0 1 100%
}
makes no sense