How to escape the container on only one side

[@KevinPowell]

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]

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]

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.

[@Perchpole]

Kevin, is there a way to adapt this which would take into account a wrapper around the image? WordPress adds this wrapper around images by default so I've got to learn to live with it!

[@Antimated]

We have something where the "container" part as you will is divided into 12 columns so the content isn't only 1/2 or container width content if that makes sense.

[@alanmurray4011]

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!

[@elska-jo]

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. :)

[@kflog-w9d]

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!

[@boris7258]

Hey, Kevin! I really appreciate your videos! They help me so much with studying and developing my own code writing style. I love how you serve explanations in deep details and suggest possible sideways. Thank you so much! I've noticed that you've used absolute properties (padding-right & padding-left) on text blocks inside the split-screen class. You're right about orientation change to "rtl" that they will stay put in place, but you forgot that the order of elements will change too. It will cause to align elements from right-to-left, therefore making last elements first and first elements last, breaking the alignment.

[@lvekua]

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]

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?

[@mindfullsilence]

One line of css is all you really need. The following works regardless of what size your container is, and regardless of how many columns you want the image to be. Assume your content and image are placed inside a container, just like all other content on the page. Store your container and gutter padding in a variable: --container-max: 40rem; --container-gutter: 1rem; Assuming a traditional container like the following: .container { grid-template-columns: repeat(12, 1fr); padding-inline: var(--container-gutter); margin-inline: auto; } Let's assume the image is place on the left side with grid-column: span 6 (or however big you want it). Add your image, and use margin-left to pull a left-side image to the edge, or margin-right to pull a right-sided image to the edge: margin-left: calc(((100vw + var(--container-gutter) * 2) - min(var(--container-max), 100%)) / -2); This will always be the same calculation, so stick it in a variable too: --pull-to-screen: calc(((100vw + var(--container-gutter) * 2) - min(var(--container-max), 100%)) / -2); This takes the width of the screen and subtracts the width of your container (including your gutter padding), which gives you the total extra "space" you have on screen. We're using a negative margin to "pull" the image in the direction we want, and we only need to pull by half the leftover space, so we divide by -2. Want to do the same with your content? Go ahead. The content div will pull to the edge of your screen, then just add padding to it to put the text back to where it should be. Below is if the content is to the right of the image: .primary { background-color: rebeccapurple; margin-right: var(--pull-to-screen); padding-right: calc(var(--pull-to-screen) * -1); } Above, we've multiploed the negative margin by -1 to flip it to a positive padding. 🤓

[@VeitLehmann]

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]

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

[@kylevandeusen]

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

[@nategarrow]

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]

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]

Thanks so much!

[@preciousbey]

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

[@senorverano]

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.

[@lewisN-11]

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

[@nyashachiroro2531]

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

[@Michael-fm8qj]

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

[@calle90]

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

[@zaph254]

Indeed you make us fall in love with CSS

[@ubaig54]

You're a Wizard, Kevin!

[@hanscesa5678]

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.

[@sumukhakb2701]

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

[@KD-tp6er]

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

[@woodrunsdeep]

Thanks a lot Kevin! That was very insightful ❤

[@tauhidxahmed]

A TRUE KING

[@mh_kohansal]

that's awesome, thank's alot kevin

[@hikari1690]

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

[@JohnP-dt7cg]

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.

[@CirTap]

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

[@CZghost]

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

[@biomazi]

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

[@PaweBystrzan]

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

[@1337ghomri]

Good stuff Kevin!

[@SuatBarlak]

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]

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.

[@Ripsey]

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

[@reymarkregencia8557]

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

[@davidsiewert8649]

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

[@dusanstojanovic3759]

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]

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]

@@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]

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]

@@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

[@アミルズハイール]

Is there any way to make it work with box-sizing: border-box; ?

[@daldreams]

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

[@ashawesomeone]

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

[@harem_lord-FFM]

I'm always struggling with layouts.

[@wchorski]

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

[@wchorski]

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]

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?

[@JonathanCampDesigner]

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]

Sorry about that!

[@JonathanCampDesigner]

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

[@Iskael]

nice tutorial 👍

[@veedjohnson]

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

[@Iskael]

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

[@mcsoud]

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]

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]

@@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.

[@eihamsalieba8662]

Im a litte bot confused. I saw in one of his old videos that you use rem for fontsizes and em for layouts. And i thought that this approach makes it easy to select the right one. 😂😅

[@BarunKharel]

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]

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]

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

[@BarunKharel]

@@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).

[@MasayaShida]

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

[@dafgfg785]

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

[@badhrikesavarajasm]

Where do I get the code for review?

[@KevinPowell]

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

[@МарияМария-ю4с]

спасибо😍

[@nomad100hd]

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]

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

[@SEWebDesign]

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

[@KevinPowell]

Not if you wanted two different colors on each side

[@SEWebDesign]

​@@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]

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]

@@KevinPowell Thank you! Love your videos!

[@SEWebDesign]

@@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!

[@ClarkeDesign]

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

[@KevinPowell]

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

[@konstantinosntamadakis9439]

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

[@LokeshKumar-tk7ri]

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

[@KevinPowell]

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]

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.

[@savado]

Can be done much simpler…

[@YaroLord]

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

[@KevinPowell]

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 :)

[@GiorgiKavtaradze-cy1ye]

❤🔥💪🔥

[@mmuralikrishna2881]

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

[@KevinPowell]

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]

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

[@ashawesomeone]

i kinda got triggered when you named a four word class

[@KevinPowell]

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]

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

[@KevinPowell]

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]

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

[@siddiqahmed3274]

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]

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

[@KevinPowell]

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]

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]

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

[@dankierson]

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]

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.