Grid with JavaScript

Integrating JavaScript with CSS Grid allows you to dynamically adjust layouts and handle events. This section covers how to adjust grid layouts dynamically and handle events with grid items.

---

Dynamically Adjusting Grid Layouts

JavaScript can be used to modify grid layouts on the fly. This can be particularly useful for responsive designs or interactive applications. Here’s how you can dynamically adjust grid layouts:

Example: Adjusting Grid Columns

Let's create a simple example where we adjust the number of grid columns based on user input:

Html:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>
<button id="change-columns">Change Columns</button>

Css:

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}
.grid-item {
background: lightgray;
padding: 20px;
text-align: center;
}

JavaScript:

document.getElementById('change-columns').addEventListener('click', function() {
  let gridContainer = document.querySelector('.grid-container');
  gridContainer.style.gridTemplateColumns = 'repeat(3, 1fr)';
});

In this example, clicking the "Change Columns" button will change the grid layout to have three columns.

---

Handling Events with Grid Items

Handling events for grid items can enhance interactivity. You can use JavaScript to respond to user interactions such as clicks, drags, or other events.

Example: Changing Grid Item Color on Click

Here’s an example of changing the background color of a grid item when it is clicked:

Html:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

Css:

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}
.grid-item {
background: lightgray;
padding: 20px;
text-align: center;
cursor: pointer;
}

JavaScript:

document.querySelectorAll('.grid-item').forEach(item => {
  item.addEventListener('click', function() {
    this.style.backgroundColor = 'lightcoral';
  });
});

In this example, clicking any grid item will change its background color to light coral.

---

Conclusion

By using JavaScript to dynamically adjust grid layouts and handle events, you can create more interactive and responsive web designs. Experiment with these techniques to add more functionality and interactivity to your grid-based layouts.