Asked by Norton Alex
at 2024-08-28 23:59:48
Point:500 Replies:8 POST_ID:829249USER_ID:12423
Topic:
grid-template#css#learn-center
Since, we not quit understand the usage of grid-template-columns/rows. Any suggestion for tutorial, in order to achieve our target.
Hide:
Attached image is our target html layout, Any hint to start
Some tutorial site is there such as
Please advise
Author: Norton Alex replied at 2024-08-30 22:38:06
Accepted Solution
Expert: Wilson Edwards replied at 2024-08-30 21:42:26
500 points Excellent
first block of your layout block, we call it class='block" which is default block or minium size block; first block, it is located at grid-column: 1/2 and grid-row:1/2 (A/B, start at A , end at B)
Hope it will help
For auto generate grid-layout
In cssjust:
#wrapper {
display: grid; /* 1 */
grid-template-columns: repeat(5, 90px); /* 2 */
grid-auto-rows: 50px; /* 3 */
grid-gap: 10px; /* 4 */
width: 516px;
}
grid-auto-rows: it will auto give it 100px height for each rows, number of row that is depended on number of div block in your layout
grid-template-columns: repeat(5, 90px): repeat 5 column with 90px width
now split the whole layout into grid as below image table I sent to u
5 columns starting from grid-1 to grid-6
Auo row starting from grid-1 to grid-4(that will be more if no of div block is more)
Now, try think to put your each div block from left to right until the last div block
First 1- class is block, so it mean default block(row: grid-1/grid-2, column:grid-1/grid-2), 100px*90px(w*h)
Second-1, class is tall, row: start from grid-1 to grid-3 (1/3), column: start grid-2 to grid-3(2/3)
So on.....from put every div block left to right until last one, then you will know the number
of rows in the whole layout
grid-row: 1/3 //it means start grid-1, end to grid-3, simple symbol, 1/3
Click Run the code, u can also edit the code then Run to update new code after click Close
- <!DOCTYPE html>
- <html lang="en">
- <head><title>Home</title>
- <style>
- body,html,div,video, canvas,pre,p,input,table,tr,td{border:0px;margin:0px;padding:0px;}
- .container{margin:0px 0px;}
- #wrapper {
- display: grid; /* 1 */
- grid-template-columns: repeat(5, 90px); /* 2 */
- grid-auto-rows: 50px; /* 3 */
- grid-gap: 10px; /* 4 */
- width: 516px;
- }
- .tall {
- grid-row: 1 / 3; /* 5 */
- grid-column: 2 / 3; /* 5 */
- }
- .wide {
- grid-row: 2 / 4; /* 6 */
- grid-column: 3 / 5; /* 6 */
- }
- .block {
- background-color: red;
- }
- </style>
- </head>
- <body>
- <div id="wrapper">
- <div class="block"></div>
- <div class="block tall"></div>
- <div class="block"></div>
- <div class="block"></div>
- <div class="block"></div>
- <div class="block"></div>
- <div class="block wide"></div>
- <div class="block"></div>
- <div class="block"></div>
- <div class="block"></div>
- <div class="block"></div>
- </div>
- </body>
- </html>
Hope it will help
Accepted Solution
Expert: Wilson Edwards replied at 2024-08-30 21:31:55
500 points Excellent
Before we start to write a code, we need to split your layout into table grid so that u will understand easier
Hide:
similar to your layout, but just with line-grid on table and grid-row/grid-column number
