Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS Grid layout goes wrong on chess.com #178

Open
awesomekling opened this issue Jun 16, 2024 · 2 comments
Open

CSS Grid layout goes wrong on chess.com #178

awesomekling opened this issue Jun 16, 2024 · 2 comments
Labels
bug Something isn't working css grid has repro We have a way to reproduce this bug. reduction of web content Issue has a simplified reduction based on real-world web content. web compatibility

Comments

@awesomekling
Copy link
Member

Hmmmmm:
image

Simplified reduction:

<!doctype html><style>
    * { outline: 1px solid black; }
    html { background: white; }
    body {
        display: grid;
        grid-template-columns: 1fr [sidebar] 500px 1fr;
        grid-template-rows: [top] 100px [bottom] auto;
        background: wheat;
    }
    .main {
        background: pink;
        height: 200px;
    }
    .chessboard {
        background: orange;
        width: 600px;
        height: 100px;
    }
    .sidebar {
        grid-area: top/sidebar;
    }
</style>
<body>
 <div class="main">
  <div class="chessboard"></div>
 </div>
 <div class="sidebar">hello</div>
@awesomekling awesomekling added bug Something isn't working reduction of web content Issue has a simplified reduction based on real-world web content. has repro We have a way to reproduce this bug. web compatibility css grid labels Jun 16, 2024
@yogirajbshinde21
Copy link

I can fix this issue, can I submit a PR here?

@awesomekling
Copy link
Member Author

I can fix this issue, can I submit a PR here?

Of course, if you have a fix, please submit it along with a layout test :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working css grid has repro We have a way to reproduce this bug. reduction of web content Issue has a simplified reduction based on real-world web content. web compatibility
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@awesomekling @yogirajbshinde21