Grid Column Span

Grid Column Span

Medium CSS Grid Layout 29 views
Explanation Complexity

Problem Statement

Make one grid item span across two columns.

Input Format

No input.

Output Format

Print the HTML+CSS code in one block.

Constraints

Use grid-column: 1 / -1 for the wide item.

Input / Output Format

Input Format
No input.
Output Format
Print the HTML+CSS code in one block.
Constraints
Use grid-column: 1 / -1 for the wide item.

Examples

Input:
Output:
(HTML+CSS code)

Example Solution (Public)

CSS 
<!doctype html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <title>meetcode</title>
  <style>
    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .item { border: 1px solid #eee; border-radius: 12px; padding: 12px; }
    .wide { grid-column: 1 / -1; background: #eafaf1; }
  </style>
</head>
<body>
  <div class='grid'>
    <div class='item wide'>meetcode featured topic</div>
    <div class='item'>HTML</div>
    <div class='item'>CSS</div>
  </div>
</body>
</html>

Official Solution Code

<!doctype html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <title>meetcode</title>
  <style>
    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .item { border: 1px solid #eee; border-radius: 12px; padding: 12px; }
    .wide { grid-column: 1 / -1; background: #eafaf1; }
  </style>
</head>
<body>
  <div class='grid'>
    <div class='item wide'>meetcode featured topic</div>
    <div class='item'>HTML</div>
    <div class='item'>CSS</div>
  </div>
</body>
</html>
Please login to submit solutions.
Editor
Output

                                        

                                    

                                    

                                        

                                                                                    
Please login to submit solutions.