or run

tessl search
Log in

Version

Files

tile.json

rubric.jsonevals/scenario-4/

{
  "context": "This criteria evaluates how well the engineer uses @material/layout-grid's fixed column width feature along with related grid capabilities to build a product card layout. The focus is on correct usage of the package's classes and structure for fixed-width grids.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Fixed width class",
      "description": "Uses the .mdc-layout-grid--fixed-column-width class on the grid container to enable fixed 72px column widths instead of fluid percentage-based widths",
      "max_score": 30
    },
    {
      "name": "Grid structure",
      "description": "Implements the correct three-layer HTML structure: .mdc-layout-grid container, .mdc-layout-grid__inner wrapper, and .mdc-layout-grid__cell elements for each card",
      "max_score": 20
    },
    {
      "name": "Column spanning",
      "description": "Applies .mdc-layout-grid__cell--span-3 or .mdc-layout-grid__cell--span-3-desktop to each card cell to make cards span exactly 3 columns",
      "max_score": 20
    },
    {
      "name": "Grid alignment",
      "description": "Uses the .mdc-layout-grid--align-right class on the grid container to right-align the entire grid",
      "max_score": 15
    },
    {
      "name": "Cell alignment",
      "description": "Applies .mdc-layout-grid__cell--align-middle to card cells for vertical centering within rows",
      "max_score": 15
    }
  ]
}