Grid element padding

Flow
1

Hello there
How can I set the padding inside the grid ?

import {
html,
PolymerElement
} from ‘@polymer/polymer/polymer-element.js’;
import ‘@vaadin/vaadin-grid/vaadin-grid.js’;
import ‘@vaadin/vaadin-dialog/vaadin-dialog.js’;

/**

  • @customElement

  • @polymer
    */
    class TesterApp extends PolymerElement {
    static get template() {
    return html `

    :host { 
     }

 @media screen and (min-width: 360px) {
     vaadin-grid{
         font-size: 9px;
     }
 }

 @media screen and (min-width: 640px) {
     vaadin-grid{
         font-size: 12px;
     }
 }
 vaadin-grid#grid{
     font-style: italic;
 }

    Hello [[prop1]

]!




Classroom: [[classroom]
]

Theme : [[theme]
]



`;
}
static get properties() {
return {
prop1: {
type: String,
value: ‘Hello Nuni’
},
items: {
type: Array,
value:
},
classroom: {
type: String,
value: ‘’
},
theme: {
type: String,
value: ‘’
}
};
}
ready() {

    super.ready();

    var s = '[["","Csanád","Zsombor","Zsolti"]

,[“1”,{“LessonId”:2341098,“CalendarOraType”:“TanitasiOra”,“Count”:1,“Date”:“2019-10-17T00:00:00”,“StartTime”:“2019-10-17T08:00:00”,“EndTime”:“2019-10-17T08:45:00”,“Subject”:“Matematika”,“SubjectCategory”:null,“SubjectCategoryName”:“Matematika”,“ClassRoom”:“004”,“ClassGroup”:“3. c”,“Teacher”:“Oroszné Matkó Tünde”,“DeputyTeacher”:“”,“State”:“Registered”,“StateName”:“Naplózott tanóra”,“PresenceType”:“Present”,“PresenceTypeName”:“A tanuló részt vett a tanórán”,“TeacherHomeworkId”:null,“IsTanuloHaziFeladatEnabled”:false,“BejelentettSzamonkeresIdList”:
,“Theme”:“Szorzás és osztás.”,“Nev”:“Matematika”,“Homework”:null},{“LessonId”:2341274,“CalendarOraType”:“TanitasiOra”,“Count”:1,“Date”:“2019-10-17T00:00:00”,“StartTime”:“2019-10-17T08:00:00”,“EndTime”:“2019-10-17T08:45:00”,“Subject”:“Matematika”,“SubjectCategory”:null,“SubjectCategoryName”:“Matematika”,“ClassRoom”:“202”,“ClassGroup”:“7. a”,“Teacher”:“Szőnyi Zsuzsanna”,“DeputyTeacher”:“”,“State”:“Registered”,“StateName”:“Naplózott tanóra”,“PresenceType”:“Present”,“PresenceTypeName”:“A tanuló részt vett a tanórán”,“TeacherHomeworkId”:null,“IsTanuloHaziFeladatEnabled”:false,“BejelentettSzamonkeresIdList”:,“Theme”:“Az összevonás”,“Nev”:“Matematika”,“Homework”:null},{“LessonId”:365382,“CalendarOraType”:“OrarendiOra”,“Count”:1,“Date”:“2019-10-17T00:00:00”,“StartTime”:“2019-10-17T08:00:00”,“EndTime”:“2019-10-17T08:45:00”,“Subject”:“Biológia tehetségfejlesztés”,“SubjectCategory”:null,“SubjectCategoryName”:“Tehetségfejlesztés”,“ClassRoom”:“39”,“ClassGroup”:“Biológia tehetségfejlesztés (11. évf.)”,“Teacher”:“KUNNÉ SZILÁGYI ANDREA ÉVA”,“DeputyTeacher”:“”,“State”:“NotRegistered”,“StateName”:“Nem naplózott tanóra”,“PresenceType”:“NotDefined”,“PresenceTypeName”:“Nem definiált”,“TeacherHomeworkId”:null,“IsTanuloHaziFeladatEnabled”:true,“BejelentettSzamonkeresIdList”:
,“Theme”:“”,“Nev”:“Biológia tehetségfejlesztés”,“Homework”:null}]]';

    this.$.grid.addEventListener('click', function (e) {
        const eventContext = this.$.grid.getEventContext(e)
        if (eventContext.section == "body") {
            var index = parseInt(eventContext.column.path.substring(0, 1));
            console.log(eventContext.item[index]

);
this.classroom = eventContext.item[index]
.ClassRoom;
this.theme = eventContext.item[index]
.Theme;
this.$.dialog.opened = true;
} else if (eventContext.section == “header”) {
var index = parseInt(eventContext.column.path.substring(0, 1));
console.log(eventContext.item[index]
);
}
}.bind(this));

    var resp = JSON.parse(s);
    var headers = resp[0]

;
var grid = this.$.grid;
for (var i = 0; i < headers.length; i++) {
if (i == 0) {
var column = document.createElement(“vaadin-grid-column”);
column.path = “#”;
column.header = “#”;
column.setAttribute(“width”, “22px”);
//column.setAttribute(“auto-width”, “”);
column.setAttribute(“flex-grow”, 0);
grid.appendChild(column);
} else {
var column = document.createElement(“vaadin-grid-column”);
column.path = “” + i + “.Nev”;
column.header = headers[i]
;
column.class = headers[i]
;
grid.appendChild(column);
column.setAttribute(“auto-width”, “”);
column.renderer = function (root, column, rowData) {
var prop = column.path.substring(0, 1);
//console.log((rowData.item[prop]
.Nev === undefined ? ‘’ : rowData.item[prop]
.Nev));
var nev = (rowData.item[prop]
.Nev === undefined ? ‘’ : rowData.item[prop]
.Nev);
var teacher = (rowData.item[prop]
.Teacher === undefined ? ‘’ : rowData.item[prop]
.Teacher);
var res = teacher.split(" ");
if (window.innerWidth <= 640 && res.length > 3) {
var temp = ‘’;
console.log(teacher, res.length);
for (var k = 0; k < res.length; k++) {
if (k != 0 && k % 3 == 0) {
temp = temp + ‘
’;
}
temp = temp + ’ ’ + res[k]
;
}
teacher = temp;
}
root.innerHTML = nev + ‘
’ + teacher;
};
}
}

    for (var i = 1; i < resp.length; i++) {
        //console.log(resp[i]

);
var obj = new Object();
for (var j = 0; j < resp[i]
.length; j++) {
if (j == 0)
obj[“#”]
= i;
else {
obj[“” + j]
= resp[i]
[j]
;
}
}
//console.log(obj);
this.items.push(obj);
}

    //console.log(this.items.length);
    //console.log(this.items);
    this.$.grid.clearCache();
}

}

window.customElements.define(‘tester-app’, TesterApp);