Hello there! I'm currently working on implementing a button that will alter the CSS grid layout

Question

Hello there! I'm currently working on implementing a button that will alter the CSS grid layout

I need help designing a button that can alter the layout of my CSS grid. The grid information is contained within a class called 'container'.

My goal is to change the grid layout by simply clicking a button, using either HTML and CSS or JavaScript.

Is there a way similar to how hover effects work, where I can have an 'onclick' event that changes the CSS upon click?

css css-grid

Answer 1

Answer №1

If you're looking to change the style only temporarily during a click, you can achieve it using CSS like this:

#myElement:active{
     /*Code Here*/
}

However, if you want the style to persist after the click event, JavaScript would be more suitable. For example:

HTML

<button onclick="myFunction()">Click Me</button>

JavaScript

function myFunction(){
    document.getElementById('myElement').style.gridTemplateColumns = "auto auto auto"
}

Here's a Functional Example

function changeGrid(){
  document.getElementById("grid").style.gridTemplateColumns = "auto auto auto"
}

#grid{
  display: grid;
  grid-template-columns: auto auto;
}

<button onclick="changeGrid()">Change Grid</button>;

<div id="grid">
<div>
hi
</div>
<div>
hello
</div>
<div>
yello
</div>
<div>
hey
</div>
<div>
wassup
</div>
<div>
yo
</div>
</div>

Answer 2

If you're looking to change the style only temporarily during a click, you can achieve it using CSS like this:

#myElement:active{
     /*Code Here*/
}

However, if you want the style to persist after the click event, JavaScript would be more suitable. For example:

HTML

<button onclick="myFunction()">Click Me</button>

JavaScript

function myFunction(){
    document.getElementById('myElement').style.gridTemplateColumns = "auto auto auto"
}

Here's a Functional Example

function changeGrid(){
  document.getElementById("grid").style.gridTemplateColumns = "auto auto auto"
}

#grid{
  display: grid;
  grid-template-columns: auto auto;
}

<button onclick="changeGrid()">Change Grid</button>;

<div id="grid">
<div>
hi
</div>
<div>
hello
</div>
<div>
yello
</div>
<div>
hey
</div>
<div>
wassup
</div>
<div>
yo
</div>
</div>

Hello there! I'm currently working on implementing a button that will alter the CSS grid layout

Answer №1

Here's a Functional Example

Similar questions

The primary section is not extending completely to the bottom, resulting in the footer not being aligned correctly at the bottom of the

Delete the CSS class from a specific HTML element

How can we modify the position of a header from fixed to relative when the mobile drop-down menu is opened?

Attempting to recreate the dynamic banner featured in the video

Scrolling with Buttons in both Right and Left directions

Using Rails to assign a page-specific CSS class within a shared layout

What is the best way to position a logo and navbar in alignment?

Is it possible to center the background button in bootstrap?

Height of cells is often overlooked in webkit browsers

Tips for positioning an asp.net Button alongside other elements in a form by making use of Bootstrap styling

take a paragraph element outside of a container div

Exploring the process of updating the background color of a specific component in Angular

Make sure to verify if the mode in Angular is either visible-print or hidden-print

The `required` attribute is ineffective when used with the `<form>` element

Menu options

Angular Placeholder Positioned at the Top

Can a div be aligned in the center with an "absolute" parent element?

Is it possible for style sheets to malfunction due to the presence of the TITLE attribute on <link> tags?

JavaScript code to toggle the navigation bar on mobile devices

ReactJS does not trigger a re-render when changes are made to CSS