how to make ion-grid clickable like button in Ionic 2 - html

Question

I designed table by using "ion-grid" but my problem in case to make it clickable like button. I could only call function by using (click)="functionX().
for example this is my grid,
<ion-grid style="padding:0px;" (click)="function1()">
<ion-row>
<ion-col col-6>
Text1<br>Text1<br>Text1
</ion-col>
<ion-col col-6>
Text2<br>Text2<br>Text2
</ion-col>
</ion-row>
</ion-grid>
<ion-grid style="padding:0px;" (click)="function2()">
<ion-row>
<ion-col col-6>
Text3<br>Text3<br>Text3
</ion-col>
<ion-col col-6>
Text4<br>Text4<br>Text4
</ion-col>
</ion-row>
</ion-grid>
I want to make each grid clickable like button (if possible) without change the design of grids

Answer 1

I had a problem like this one, but i wanted inside one of the col. The solution I found was to place a button tag inside the row, for your problem it should be something like this:
HTML
<ion-grid style="padding:0px;">
<button id='hidden-button' ion-button (click)="function1()">
<ion-row>
<ion-col col-6>
Text1<br>Text1<br>Text1
</ion-col>
<ion-col col-6>
Text2<br>Text2<br>Text2
</ion-col>
</ion-row>
</button>
</ion-grid>
CSS
#hidden-button{
height: 100%;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}

Answer 2

Using the <button> tag styles its contents according to the ionic button style. One of these effects is the onTouch animation (ripple effect) I think the OP is after.
You can also achieve this ripple effect by using ionic's <ion-ripple-effect> within any tag, as long as you assign the class ion-activatable to the parent element, like so:
<div class="ion-activatable">
<ion-ripple-effect></ion-ripple-effect>
Button Text
<div>
Documentation for ionic-ripple-effect