{"record":{"id":"03d90fdaae6fe8ac","repo":"angular/components","slug":"mat-grid-list-tile-with-colspan-tilecols-is-wi","errorCode":null,"errorMessage":"mat-grid-list: tile with colspan ${tileCols} is wider than grid with cols=\"${this.tracker.length}\".","messagePattern":"mat-grid-list: tile with colspan (.+?) is wider than grid with cols=\"(.+?)\"\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/material/grid-list/tile-coordinator.ts","lineNumber":98,"sourceCode":"  /** Calculates the row and col position of a tile. */\n  private _trackTile(tile: Tile): TilePosition {\n    // Find a gap large enough for this tile.\n    const gapStartIndex = this._findMatchingGap(tile.colspan);\n\n    // Place tile in the resulting gap.\n    this._markTilePosition(gapStartIndex, tile);\n\n    // The next time we look for a gap, the search will start at columnIndex, which should be\n    // immediately after the tile that has just been placed.\n    this.columnIndex = gapStartIndex + tile.colspan;\n\n    return new TilePosition(this.rowIndex, gapStartIndex);\n  }\n\n  /** Finds the next available space large enough to fit the tile. */\n  private _findMatchingGap(tileCols: number): number {\n    if (tileCols > this.tracker.length) {\n      throw Error(\n        `mat-grid-list: tile with colspan ${tileCols} is wider than grid with cols=\"${this.tracker.length}\".`,\n      );\n    }\n\n    // Start index is inclusive, end index is exclusive.\n    let gapStartIndex = -1;\n    let gapEndIndex = -1;\n\n    // Look for a gap large enough to fit the given tile. Empty spaces are marked with a zero.\n    do {\n      // If we've reached the end of the row, go to the next row.\n      if (this.columnIndex + tileCols > this.tracker.length) {\n        this._nextRow();\n        gapStartIndex = this.tracker.indexOf(0, this.columnIndex);\n        gapEndIndex = this._findGapEndIndex(gapStartIndex);\n        continue;\n      }\n","sourceCodeStart":80,"sourceCodeEnd":116,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/grid-list/tile-coordinator.ts#L80-L116","documentation":"TileCoordinator._findMatchingGap validates that a tile's colspan fits within the grid's column count before searching for a free gap. A tile wider than the total number of columns can never be placed, so the coordinator throws immediately.","triggerScenarios":"Setting [colspan] on a mat-grid-tile greater than the grid's cols value, e.g. <mat-grid-tile [colspan]=\"4\"> inside <mat-grid-list cols=\"3\">, or a dynamic colspan variable that exceeds cols.","commonSituations":"Changing cols to a smaller number while tiles keep large static colspan values; binding colspan to computed data that can exceed cols; copy-pasting tiles between grids with different column counts.","solutions":["Ensure every tile's colspan is <= the grid's cols value.","Clamp dynamic colspans: [colspan]=\"span > cols ? cols : span\".","Increase cols on mat-grid-list if the wide tile is intentional.","Audit templates after changing cols so no tile keeps a stale, larger colspan."],"exampleFix":"// before\n<mat-grid-list cols=\"3\">\n  <mat-grid-tile [colspan]=\"4\"></mat-grid-tile>\n</mat-grid-list>\n// after\n<mat-grid-list cols=\"4\">\n  <mat-grid-tile [colspan]=\"4\"></mat-grid-tile>\n</mat-grid-list>","handlingStrategy":"validation","validationCode":"// before binding tile colspans\nfunction clampColspan(span: number, cols: number): number {\n  return Math.max(1, Math.min(span, cols));\n}\n// template: <mat-grid-tile [colspan]=\"clampColspan(span, cols)\">","typeGuard":"function fitsGrid(span: number, cols: number): boolean {\n  return Number.isInteger(span) && span >= 1 && span <= cols;\n}","tryCatchPattern":null,"preventionTips":["Keep a single source of truth for cols and clamp all colspans against it.","Re-audit tiles after changing a grid's cols value.","Avoid hardcoding colspan in copy-pasted tiles across grids with different cols."],"tags":["angular-material","grid-list","colspan","layout"],"backgroundTag":"colspan-exceeds-grid-columns","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}