I need some help (css-grid)

Hey guys
I am trying to do my 3rd project. Now, trying to use “css grid”.

My project link: https://codepen.io/ayhanizmir/full/PoZqQGm

As you see, it is a page with information in the boxes. I want to do these (I tried but could not) :

  1. Let each box automatically stick the upper box after we done to write inside info (grid-gap is already set).
  2. As you will notice, the text comes out when you change the page resolution (doesn’t fit in the boxes). How can I make automatic adjustments of these boxes?
  3. How can I auto-tune the mobile and tablet version (also computers with different resolutions)?

The answers were probably in the course, I tried to find them but could. Meanwhile, I am trying to find again.

@ayhanisidici, I found multiple issues in your project. Even I got confused thinking how I could guide you in your existing code.

I am giving you some points to work on, whatever the output, I would suggest to revise the lessons/challenges related to this project, then start again with a fresh mind.

However, to understand the problem with your code (that you are looking for) do the following things: ( I’m just mentioning few of them)

  1. remove all height and width from your css, then observe the result, it’ll control the overflow matter
  2. check your css, you declared 1fr 1fr 1fr 3 times, but you made grid-template-areas : header header header header and then all 4 times, remove 1 and keep 3, then observe the result with large/small screen
  3. In html code you used multiple header and so on, the fact is not the way you thinking, make it once, then it will work the rest with your css

By doing this, you will be able to understand few more things, and hope to find and solve more problems by yourself. I wonder at this beginning level if you face multiple issues at a time you may get discouraged! But Don’t give up, the process is very simple. Just start with a fresh mind, and take a break when necessary.

My comment is not a complete solution for you, but it will help you to understand the matters you’re struggling with.

Thank you.

Thank you very much. I decided to design new page over again taking into account your suggestions. Whenever I finish, I will share my new page’s link over here.

Note: Yes sometimes my mind puzzle; but as you said i need more practice. I just have started 15 days ago and before that I had not any experience

1 Like