About the example for 'Responsive Everythins'. #13491
Replies: 1 comment 3 replies
-
|
Hey @seventh1990!
As you can see in the markup, each child is assigned specific positions in the grid using When the browser encounters empty cells in the grid without a |
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much for your reply. The example above is from the official website. Here's my simplified sample code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<main>
<div class="mx-auto grid max-w-5xl gap-x-20 grid-cols-2">
<div class="col-start-1 row-start-1">
<p>1</p>
</div>
<div class="grid col-end-3 grid-cols-4 gap-6 col-start-2 row-span-6 row-end-6">
<img src="/beach-house.jpg" alt="" class="w-full h-60 object-cover rounded-lg lg:col-span-full" loading="lazy">
<img src="/beach-house-interior-1.jpg" alt="" class="w-full object-cover rounded-lg lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy">
<img src="/beach-house-interior-2.jpg" alt="" class="w-full object-cover rounded-lg lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy">
</div>
<dl class="row-start-2 lg:row-start-2">
1
</dl>
<div class="col-start-1 row-start-3 row-span-2 lg:col-start-1 lg:row-start-3 lg:row-end-4">
<button>1</button>
</div>
<p class="col-start-1 lg:row-start-4 lg:col-span-1">
1
</p>
</div>
</main>
</body>
</html>After many attempts, I finally discovered the reason. Moreover, I don't think there's a display bug with row indexes. On the contrary, it's precisely by utilizing defined row indexes that the above effect is achieved. The key to this piece of code lies in the The CSS code that actually takes effect： grid-row-start: span 6;
grid-row-end: 6;You can try changing Although I found the reason, I haven't found an explanation for this feature. |
Beta Was this translation helpful? Give feedback.
-
|
You're correct that Here's a simplified example I created: Play Tailwind - Grid. The rows have the correct indexes marked. Does this help? 
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks. Your code is good and conforms to the normal logic of grids. I initiated this discussion only because I have some doubts about the implementation on the official website. |
Beta Was this translation helpful? Give feedback.
-
Why is the content on the left vertically centered in the grid?
Is it caused by some properties of the grid?
Can someone help me?
Beta Was this translation helpful? Give feedback.
All reactions