How to escape the container on only one side

Подписаться 913 тыс.

Просмотров 47 тыс.

50% 1

🎓 If you’ve been writing CSS for awhile now but you’re having trouble making that next step up with is, you might be interested in my course CSS Demystified: kevinpowell.co/courses?...
Having something be full-width on a website isn't hard, and there are even some neat tricks to break out of a container for a full-width section of a site, but what about when you only want one side to go all the way to the edge?
There are simpler ways to set this up, but in this video I look at how I like to do it because it’s incredibly versatile, and also gives us a good chance to learn more about custom properties, logical properties, grid, positioning, and more 😊.
🔗 Links
✅ Finished code: codepen.io/kevinpowell/pen/ZE...
✅ CSS Demystified: cssdemystified.com?
✅ My other courses: kevinpowell.co/courses?...
✅ My Grid videos: • Getting started with C...
✅ More on logical properties: • Write better CSS using...
✅ How I place my cursor in multiple places at once: • VS Code shortcuts & ti...
⌚ Timestamps
00:00 - Introduction
01:30 - The basic setup for small screens
04:45 - Basic setup for larger screens
10:35 - Fixing the placement of content on larger screens
13:25 - Making the background take up the full width
16:37 - Making it work if the text is before the image
20:00 - Fixing the vertical spacing
22:50 - CSS Demystified
23:15 - Fixing the alignment with the wrapper
24:25 - Fixing the inner spacing
26:48 - Fixing the images
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 106

@KevinPowell 9 месяцев назад

A few people suggestion there are better ways, but don't go into detail. If you have a better idea or approach, I'd honestly love to know more, so please go into detail! Also, some people mentioned the pseudo-elements not being needed because you can just put the background on the entire section, but as I show near the end, you can also use this to have a text box on each side, each with a different background color by doing it this way.

@attilaguba856 9 месяцев назад

Hi Kevin! I really like your all videos , it helped a lot for me in CSS! Do you have any good example about I'd like to add a background responsive video with fixed height like 350px. How can I deal with it ? Do you have any example please ?

@konstantinosntamadakis9439 2 месяца назад

I recently came across this layout for a project and immediately remembered the video you made with "A new approach to container and wrapper classes"..could the same solution work with a combination of this creating an extra grid-template-column which could be the [ center-start ] 0 [ center-end ] so as to give a grid column of full-width-end / center and accordingly center / full-width-end? I tried to generate it and it worked, but only for this specific case, the center.. it really has me confused and I would like to know if it is really possible.

@alanmurray4011 9 месяцев назад

Thanks, Kevin. You see this layout style a lot in UI mockups on the likes of Dribbble. It's definitely one of those layout patterns where designers think it's clean and simple, but the reality of implementing it with CSS is actually quite tricky. Great work as always!

@woodrunsdeep 9 месяцев назад

Thanks a lot Kevin! That was very insightful ❤

@kylevandeusen 9 месяцев назад

I've struggled so hard with these layouts - thank you Kevin!

@lewisN-11 6 месяцев назад

Thank you so much for this video, Kevin! Love your channel!

@sumukhakb2701 9 месяцев назад

Thank a lot for this video, i was waiting for this for a long time

@nyashachiroro2531 9 месяцев назад

This was a fantastic video. Just the thing I was looking for after scratching my head for a while. Wow.

@elska-jo 9 месяцев назад

I recently used this in an app we're building, and I can't tell you how happy it makes me to see your video on it. A kind of validation that yeah, I am on the right track. :)

@mh_kohansal 8 месяцев назад

that's awesome, thank's alot kevin

@preciousbey 9 месяцев назад

Kevin truly makes me love css. He makes everything look so easy

@VeitLehmann 8 месяцев назад

Nice! I'd solve it in the same way, but I would do some things differently, in my opinion simpler and/or more flexible: 1. The first and last column doesn't need the wrapper-padding-inline, you have it already on the div holding the text. so it's enough to have grid-template-columns: 1fr minmax(0, 25rem) minmax(0, 25rem) 1fr 2. You could set the background color on the whole .full-width-split-screen, so you don't need any pseudo element to make it stretch to the edge 3. Instead of selecting > img and > :not(img), I'd select :first-child and :last-child (or :nth-child(...)), so you can also have the image on the right, depending on where you put it in the markup

@kevinhuddy4470 9 месяцев назад

i usually do it with calc. apply a margin-left of calc((50vw - 50%) * -1)

@keenanflogerzi5218 9 месяцев назад

Appreciated this! There’s some comments saying it can be done simpler, but I love the versatility. In real world scenarios it’s always a balance of writing “simple solutions” 10x, or a slightly more complicated single solution that is more flexible and DRY. Also learned some new grid tricks with the pseudo elements. Thanks Kevin!

@ubaig54 Месяц назад

You're a Wizard, Kevin!

@zaph254 9 месяцев назад

Indeed you make us fall in love with CSS

@1337ghomri 9 месяцев назад

Good stuff Kevin!

@nategarrow 8 месяцев назад

I like this approach a lot! In the past, would have a full-page width container with a half-page width background image in a pseudo-element, then shift it right 50% then translate it left -50vw to get it to fill hall of the viewport. Your approach, admittedly more verbose and detailed, is also more flexible! Will definitely remember this for next time.

@flipvandevoort 8 месяцев назад

Thanks! I have been looking for a tutorial like this for a few weeks now, I was very close to giving up on this layout. Seems very easy, now that I've seen you do it.

@KevinPowell 8 месяцев назад

Thanks so much!

@lvekua 9 месяцев назад

This is so robust and versatile. Thank you Kevin! ❤ The way I did it most of the time is; depending on the side slap the padding-inline-start: or padding-inline-end: calc((100vw - var(--wrapper-width) / 2)) and oc then you need to put this into a media query.

@sumerianbrother 9 месяцев назад

exactly what I'm doing. seems simpler this way? i wonder what could the downside to our solution be. hm. doing it Kevin's way seems overly complicating things. I must be missing something?

@Michael-fm8qj 9 дней назад

Just add: min-width: 50vw; margin-left: calc(-50vw + 100%); to the left div (image wrapper)

@hikari1690 9 месяцев назад

oh clever! My first thought was to use javascript and flex. Your videos always reminds me to keep practicing even if I'm no longer doing web dev XD

@biomazi 9 месяцев назад

Hi Kevin, thanks for doing this, you are very educational about CSS. Is there a link to the code somewhere?

@reymarkregencia8557 9 месяцев назад

What the heck! This is exactly what I need! 😊

@hanscesa5678 9 месяцев назад

I have seen something like this before on your channel where the the goal is to escape the background of a particular section from the container so that the background stretches to both ends. I forgot what video it was though, I think I need to find it haha.

@calle90 9 месяцев назад

everyone should see this video. simply unbelievable what is possible with Grid

@senorverano 7 месяцев назад

I really enjoyed this tutorial and it was very useful! I just wanted to leave a note that might be useful for other users working with your finished code. In that example "box-sizing: border-box" isn't defined. So if someone already had it defined in their project, the results would vary because of padding.

@tauhidxahmed 8 месяцев назад

A TRUE KING

@Iskael 9 месяцев назад

nice tutorial 👍

@veedjohnson 9 месяцев назад

How did you watch a 28mins tutorial in 1 min 😭

@Iskael 9 месяцев назад

@@veedjohnson just skip to main content/what i need to see

@CZghost 9 месяцев назад

I think I know how I'm gonna make my websites now. Thanks.

@wchorski 8 месяцев назад

how are you getting the hot reloading of css? it's probably my dev env, but I'm using NextJS with css modules. When I save the file the browser refreshes and the nice grid dev tools reset every time.

@JamesWelbes 8 месяцев назад

If you have a container that for whatever reason has to have position of absolute or relative, but there's an element inside that container and you want to give it position absolute but you want it to act as if its parent element had position static. Is that possible?

@KD-tp6er 9 месяцев назад

It's like you know I'm struggling with something, and then boom,a Kevin Powell video...

@Ripsey 9 месяцев назад

Great video but box-sizing: border-box gives a problem with the wrapper padding-inline

@PaweBystrzan 8 месяцев назад

Just wondering about reverse, but without touch on the html. Imagine WordPress Blocks and what could be done with this with native blocks and CSS techniques. for me the mobile first is still good way to think about the project so reverse by CSS order on mobile is solution with Your approach, but it's always better to have one component (html) and few lines of code. I'm happy You show the techniques, but I would be happy to see how to reverse this grid also in one tutorial. Thank you and best regards Kevin - Paul from Poland

@SuatBarlak 9 месяцев назад

As far as I know giving an image that is a direct child of a grid a height of 100% can lead to strange behavior on older iOS devices. I've had this kind of problem before and you need to either use align-self: stretch on the image or put it inside a wrapper. (Can't try it though atm)

@KevinPowell 9 месяцев назад

I tested on Safari and things worked for me with this implementation. the default is `align-self: stretch`. There are some things with images in Safari that are buggy though, but I think in this situation it works out alright.

@JohnP-dt7cg 9 месяцев назад

The limitations to this method are the pseudo elements, this means we can't have textured / image backgrounds, or certain types of gradients with text on top. When subgrid is fully supported, you can set grid-template-columns to subgrid on the :not(img) selector, and wildcard everything inside the :not(img) > * (or have another nested wrapper) to start at the column you need. Enabling any kind of background to stretch the full width and removing pseudos. Subgrid is close now though... Finally! And the method in this video does work for the majority of cases I deal with... It's just those few limitations like the above where I tend to splash in a little javascript to accomodate.

@daldreams 9 месяцев назад

HOLY COW!!! My poor little brain is literally full after this tutorial and cannot absorb anymore for at least 48 hours LOL

@CirTap 8 месяцев назад

iirc you don't need to use calc() inside other math functions like min() max() minmax() fit-content() etc.

@ashawesomeone 9 месяцев назад

this was a problem i faced a long time ago, i fixed it using margin auto on on side

@wchorski 8 месяцев назад

let's say i have a stack of rows for desktop layout like [text, image] [image, text] [text, image] when condensing to mobile, the ideal layout would be image text image text image text using this grid technique, how can i make sure when sizing to mobile that the elements stack in a sandwich that toggles image and text? Like with flexbox I can set the direction to a singular way with a media query

@JuriBinturong 9 месяцев назад

I'm always struggling with layouts.

@JonathanCampDesigner 9 месяцев назад

Wow mate … did you have a tripple expresso before this video🤪 Great effects but utterly confusing IMHO. … and BREATH 🤣🤣🤣 this was def a mega advanced video at the speed of light. Still great video but mate… are you running in hyper mode LOL

@KevinPowell 9 месяцев назад

Sorry about that!

@JonathanCampDesigner 9 месяцев назад

@@KevinPowell just let me know the brand of that coffee mate! 👍☕️☕️☕️

@badhrikesavarajasm 9 месяцев назад

Where do I get the code for review?

@KevinPowell 9 месяцев назад

Sorry I forgot to put it in the description when I posted it! Here it is: codepen.io/kevinpowell/pen/ZEmgQvV

@MasayaShida 9 месяцев назад

my OCD cant handle that imbalance! JK im gonna learn from this video thank you!

@davidsiewert8649 8 месяцев назад

I think "grid-column: span 2 / span 2;" - would be a better to say "image spans 2 grid columns" without needing to specify specific columns and adding pseudo first/last selectors

@BarunKharel 9 месяцев назад

I find the use of grid-layout unnecessarily complex. The implementation can be simpler by using flex-layout, margin-left: auto, margin-right: auto.

@JohnP-dt7cg 9 месяцев назад

The most important part of this layout style, is that the text *inside* the background colors, line up exactly with the rest of the grid on the site. How do you make sure the text lines up with margin auto's? Can you share a codepen with an example?

@BarunKharel 9 месяцев назад

@@JohnP-dt7cg You can check my implementation here: http (://) demos (.) barunkharel (.) info (.) np (/) escape_container_on_one_side

@BarunKharel 9 месяцев назад

@@JohnP-dt7cg The trick is to set max-width of each column of split-section to half of max-width of non-split section and also include padding of one side. And then using either margin-left: auto or margin-right: auto to make the content stick to either right or left respectively. In my implementation, non-split container has max-width: 50rem and column of split container has max-width: calc(25rem - 12px).

@LokeshKumar-tk7ri 9 месяцев назад

Hey Kevin I'm afraid that AI will replace web developers ??😢

@KevinPowell 9 месяцев назад

It's nowhere close yet, and if it makes the advances needed to actually start replacing actual roles, most jobs in any sector will be at risk. Right now it's a useful tool that can make people more effecient, and it'll be that for a long time to come. Think of self-driving cars that were supposed to take over, and it's been a decade that it's stalled now because the last 1% is the hardest part to get past. Can cars self-drive in very specific situations? sure. But for the most part, they're helpful aides making sure we don't drive outside the lines, or being able to take over in controlled environments. When it does happen and AI makes that jump, no industry is safe 🤷

@gregoriusmike 9 месяцев назад

It will have the opposite effect to what you're thinking for now... I suspect a lot of people will unfortunately lose motivation to pursue some coding things due to the false impression ai gives which will open up opportunities for those who are not dissuaded. There will also be others who for which ai will revitalize their programming endeavours. Ai can help with a lot but you still have to guide it based on the context of your unique situation. It's best to think of it as a powerful tool but one which is in better hands of an expert/artist I'll say. I suspect that will be the case for a while still... companies also want to sell their ai ai systems and because many don't understand ai, it can really throw you off the reality of how things are. Also code output needs an expert eye to ensure it's good for production and you have to know what you're prompting for. I personally find ai useful to get the general structure of some code out and then can tweak from there. I know I still need to keep improving my programming knowledge regardless. Long term in regards to ai I think anyone who wishes to create something consider themselves an artist. Even if ai could effectively do everything you'd hope it's under the influence/direction of good people/experts/artists etc. Something like that.

@dafgfg785 9 месяцев назад

When there is only one img. .full-width-split-screen > :is(img:only-child) { grid-column: 1 / -1 ; }

@ClarkeDesign 9 месяцев назад

Why not just apply the background colour accent to the whole section?

@KevinPowell 9 месяцев назад

Because you might have a different color on each half, like I did at the end :)

@konstantinosntamadakis9439 9 месяцев назад

@@KevinPowellIs it possible to use the grid column property to set the background color instead of the pseudo element?

@dusanstojanovic3759 9 месяцев назад

There is a much simpler solution and it works flawlessly. It uses negative margin on div with image inside, image that is absolute positioned: For image on right: margin-right: calc(calc(var(--number-of-cols) * 100% - 100vw + calc(var(--grid-gap) * calc(var(--number-of-cols) - 1))) / 2); Same for left, just margin-left

@jeffreyrosenfeld6102 9 месяцев назад

Nah, 100vw will not "work flawlessly", unless you only test your websites on OSes that have no visible scrollbars. It's an old solution, where you have to also account for scrollbar width and visibility etc. Currently grids are no brainer for any full-width/break-out layout.

@dusanstojanovic3759 9 месяцев назад

@@jeffreyrosenfeld6102 you're right. The only flaw is those ~16px that get covered up with scrollbar if it's visible. Small price to play for brevity IMHO.

@KevinPowell 9 месяцев назад

It doesn't only get covered by the scrollbar, but it also introduces horizontal scrolling as well. I'm not really sure if it's simpler either? You still need one of those for images that are either the first child or last child like I did, and it also doesn't help if we have text boxes where we want the background to fill up the entire side. There are similar tricks to do that too, as you can do a similar thing with the pseudo-element, but when you have different ones on each side, things aren't really simpler than what we did here 🤷

@dusanstojanovic3759 9 месяцев назад

@@KevinPowell I mean, you both are right. But it seems to me it's more like an experiment in what css grid can do. I'll stick with "old-fashioned" solution since most of the time these images are decorative, not informative and the CSS code is much simpler in my opinion. codepen io stdusan pen eYWdgKv

@GiorgiKavtaradze-cy1ye 9 месяцев назад

❤🔥💪🔥

@nomad100hd 9 месяцев назад

It's hard to do more than passively listen in the background without having the starter code to follow along. The link to the code is not in the description.

@KevinPowell 9 месяцев назад

Forgot, but just added it now, you can find it here: codepen.io/kevinpowell/pen/ZEmgQvV

@SEWebDesign 9 месяцев назад

If you applied the background color to the section you could have avoided the whole pseudo element mess!

@KevinPowell 9 месяцев назад

Not if you wanted two different colors on each side

@SEWebDesign 9 месяцев назад

@@KevinPowellgotcha, that is true. It just seems limiting to only be able to use a solid background color. You couldn't use a gradient or background image with this method. Is there any chance you make the code available on codepen so all of us in the comments can present solutions?

@KevinPowell 9 месяцев назад

I've added it to the description, sorry I forgot when I first posted it. And yes, the gradient trick could work in those spots :)

@SEWebDesign 9 месяцев назад

@@KevinPowell Thank you! Love your videos!

@SEWebDesign 9 месяцев назад

@@KevinPowell The solution I came up with to make it work for both use cases of whether you want the split sections to have a solid or a gradient background was to change the ::before pseudo element from only spanning the first or last column, to spanning the entire half of the screen. Then I gave it a z-index: 1; so that it sat above the text div. This way you get the background color spanning all the way across half of the section (but is still able to inherit the background from its parent). Since the ::before element now covers the section content, I gave any direct descendent of the div a z-index: 2 so that the content would go back on top of the ::before element: .full-width-split-screen > :not(img) > * { z-index: 2; } Admittedly I couldn't come up with anything cleaner than that. But it works in all use cases and does allow for other background styles than just a solid color. Here is the link to the codepen if you want to have a quick look: codepen.io/chris_s-e/pen/abPZyav I really like these types of videos and it gets me thinking about how to solve layout problems like this which is fun, thanks for all your work!

@mcsoud 9 месяцев назад

I think I have a much simpler way, the main section should have display grid with grid template columns 1 and grid template rows 1, then 2 divs inside it should be grid template columns 2 with one of them that has the content also a container class. It works perfectly.

@KevinPowell 9 месяцев назад

Not sure I'm 100% following what you're suggesting, but I do agree it could be simplified in certain ways, but I wanted to look at how we could do it if we already had a .container or .wrapper class, and work along with it. In the end I think it ends up being pretty similar either way though.

@mcsoud 9 месяцев назад

@@KevinPowell It's like having a 2 divs background with an image and color in the background then stick the 2 divs container on top of it with the grid cols 1 and grid rows 1, both wrappers will adjust to the bigger sized one. It did me so well actually since our company's UI UX got some insane designs.

@savado 9 месяцев назад

Can be done much simpler…

@YaroLord 9 месяцев назад

how? share some knowledge instead of just being a snarky a hole

@KevinPowell 9 месяцев назад

I don't disagree, and even stated that at the start. The goal here is versatilitiy and ease of use once it's been set up :)

@mmuralikrishna2881 9 месяцев назад

This is average logic. We can use fluid-container div width:100vw and inside we can call container

@KevinPowell 9 месяцев назад

Not sure I understand how that would work... and 100vw creates horizontal scrolling on browsers that don't have a floating scrollbar. There are ways of dealing with that, but why not just use 100%? Unless you mean to break out of the container, but if I do something like this to break out of a container, how do I keep the text appearing like it's still inside a container?

@muralikrishnam5624 9 месяцев назад

@@KevinPowell .fluid-container{width: 100vw; left: -50vw; margin-left: 50%; position: relative; overflow: hidden;} .container{max-width: 1129px; margin: 0 auto;}

@ashawesomeone 9 месяцев назад

i kinda got triggered when you named a four word class

@KevinPowell 9 месяцев назад

I'd rather be explicit in what it does and not have to worry about naming the children with classes, than using some shorthand that people don't understand at first glance :)

@theman7050 9 месяцев назад

I dont understand why simple concepts require 20-30 minutes of explanation. 🤬

@KevinPowell 9 месяцев назад

You could just go to the codepen with the finished code if you'd like. I'm hoping to not only show how to do it, but explain my thought process and break down how it's working, so it's not just a "this is how this works", but something you can learn from as well.

@SEWebDesign 9 месяцев назад

@@KevinPowell Personally I love the in-depth explanations! Keep the videos long!

@siddiqahmed3274 9 месяцев назад

Either you think everyone is css wizard and can look at the code and understand it. Or you really are a person who just want the solution with minimal to bo explanation on how that works.

@ToyotaCharlie 9 месяцев назад

co za zero z tego Jakimowicza. Na każdym poziomie. również szokujące, że takim ludziom pozwala się robić "karierę"

@KevinPowell 9 месяцев назад

If you have a better solution I'd love to know what it is. As I said off the start, the point isn't to make it as simple as possible, but as simple as possible to use once it's set up. If you have another better suggestion, I'd honestly like to know what it is so I can share it.

@siddiqahmed3274 9 месяцев назад

That's really really rude of you. You don't know how many people now understand css (layouts specifically) because of Kevin sir. If you have a better and versatile solution, you should have posted that instead of saying such things.

@siddiqahmed3274 9 месяцев назад

@@KevinPowellThanks a lot sir. It is a lot cleaner and versatile than any of us could have come with.❤️

@dankierson 9 месяцев назад

Pure gibberish, Kevin. The purpose of the video isn't really clear and the continual digressions and quizzical methodology applied to the mysterious problem make it infuriating. Try speaking at a normal pace for once and state the issue in a way ordinary folks can understand it. 🙄

@siddiqahmed3274 9 месяцев назад

Don't agree. The purpose of the video is very clear, how to break through the container for background colors and images but still keep the text align with your container size.