 Oh, tunggu. So, I was at work and I had some scissors problem, so I realised that I could solve it by using grid. But you know grid versus text box, what they say is, flex box use it to do single dimension layouts, whereas grid use it for two dimensions, x and y. So I realised that I use grid in the x direction only, but only that can solve my problem. So, two months ago, I changed company, I joined NTUC Ling. That's not the swim market, that's fair price. I joined the Ling, which is the loyalty programme. So like Ling points plus card, I think you all just grab, so probably don't know. But yeah, so I joined to work on the website. So one of the first things I noticed was, let me just change out this. I can't see anything. Okay. So one of the things I noticed was, is it this stripe at the bottom here, right? Let me just see me a little smaller screen. I can't resize it. Wait, nah. Rest my mouse. So this stripe at the bottom, I'm going to guess how it's done. As you can probably guess, it's an image. That's why it's auto-sizing. And on my screen at home, on various screens, it looks quite bad. So this is what it looks like on most screens. My screen at home is like a white screen, so it looks terrible. So I was guessing, what happened, why did this happen, right? And my guess was, I think that the designer and the previous developer worked on this website. They received a mock-up from the designer and that mock-up is exactly, like, this width. That's why now the font size is correct. The alignment is correct. But any other screen size, it just looks off. So, the first thing I did was how to fix these problems. And a lot of times, when you solve these kinds of thesis problems, you kind of narrow down what are your minimum requirements. So you start with, like, the simplest problems, the easiest slow-hanging fruit problems. Number one, I'll use text because you fix the font-size issue because sometimes the image is auto-sizing, it's over the place. Then you can change the text in the future and change the color in the future more easily. So that's the easiest problem to solve, right? Second problem is I want to make sure it fits the constraints of the page. So there's this container width following except for that thing itself. So number two, text position must be constrained. Respect the container. And how would you do that? So, if this pink box is the container and the white, the red, the black square is the screen, what I'll probably do is I put the text here and I put a stripe over it and maybe set it behind and go on the text, right? So that's the simplest way to do it, right? So, why is this not good? One problem is because the gradient stretches from left to right. If I change the screen size, if you look at this part in the middle here, the gradient is affecting, it's not consistent. So although, I'm exaggerating this example, but I can't rely on it because this is a branding thing. So, I know that the yellow must end at some point, then the gradient starts. So, what I kind of narrow it down is this part needs to be this specific yellow. The text and that bar over there and a bit on the bar on the right side, then the gradient starts from somewhere there all the way to this the other side, right? And that's the container. So, the gradient need to stretch from there all the way till the end of container. That means that whenever the text changes right, the gradient also changes. So, okay. That's the next hardest thing. Uniform yellow strap on the left edge. Ya, so that's the left side. Then the right side has to I already say adjust to the text. So, the next hardest thing is to gradient starting point should adjust if the length of the text container changes. So, attempt number 1, I use flex box. I can actually do some life coding now. Oh, I cannot see anything. I cannot even look at this. So, my screen is a bit off. Hold on ya. So, all I have is like a footer a container to contain the a container which is the red line to contain the stuff inside it. The text is just this thing. Very simple markup, right? So, I can just do flex box method. I'm going to use a display flex for the text. I'm going to use a suitable element for the bar on the right side. I already have the background image side cheated a bit. Align items. So far so good, right? And maybe margin So, I got this far. But how do I get the other bar on the left side? So, there's another way I can use before. Same thing. Funky, let me just show it. Ya. What? So, the left Oh, just left zero. So, what I'm doing is actually kind of cheating. Let me just Z index Oh, minus 1, sorry. And, where's the text? So, this is like the most cheat way I can do it, right? So, what I don't like, and I put it live actually staging for a while but it wasn't but I thought it was the best I could do but I wasn't very satisfied because in this part I know that the gradient is supposed to stretch from here to here but it's only reaching here and I'm doing the fake background border background stripe thing in case you didn't see it. Ya, so it's like a bit of a hack, right? Container, which I don't think was supposed to be the correct design but I lived with it for a while then I realised that maybe something else like grid could work. So, my next challenge, grade 5 gradient should end at the edge of the viewport and not within the container. So, number 2 my second attempt with grid so now it's not live coding, live uncommenting. Something like live coding but let me just step by step show you, right? So footer so actually now the workout is simpler wait, I need to show this first, wait step by step what happened is why we can use grid so grid has this thing called min max which is actually what it replaces the container the container that I was using previously and I can use one FR left and right so it's auto sizing container on the left side the first column on the left side to be equal to that one FR and the other column to be the remaining space so this is the CSS for that I can then use the same technique just now I can just display flex with the column that's bigger I can now stretch because now I acquired the whole I can stretch the gradient all the way from the text all the way to the end of the viewport and the other side so I'm just going to do live coding live uncommenting for this with grid so the footer is outline in red the text outline in blue display grid on the footer then I'm going to add the grid positioning on to the text no container already I then put the flex box on that text and I can put that same technique just now to show it up and push it a bit so now it's left with the other one the other so I'm not looking at my screen so I'm just doing this and I actually can just align self center and also just padding left and now it's live among page so this is what it looks like now I don't know where's my edge but I can't really so now it looks pretty nice so now the gradient stretches to whatever it stretches to whatever width that occupies so I know this is probably something that I might not experience again I might not have to solve again but I'm abusing grid and I'm happy with it so yes thank you just any gradient now just check up on the plus website