homepage with grid

<html>
<head>
<style>
#container{
display: grid;
grid-gap:5px;
grid-auto-rows: 50px;
grid-auto-columns: 100px;
grid-template-areas:
"..... item1 ....."
"item2 item3 item4"
"item5 item6 item7"
"item8 item9 item10"
"item11 item12 item13";
}

.link{
border: 1px solid black;
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>

<div id="container"></div>

<script>

let create= (x)=> document.createElement(x),
select= (x,y=document)=> y.querySelector(x),
selectAll= (x,y=document)=> y.querySelectorAll(x);

let container= select("#container");

function createLinks(p,q,r,s,t){
let a= create("div"),
b= create("a"),
c= create("span");

a.className= p;
a.style.gridArea= q;
b.text= r;
b.href= s;
c.innerHTML= t;

a.append(b,c);
container.append(a);
}

let list={
"doctor who": "/doctorwho",
"drawing": "/draw",
"link lister": "/tools/link-lister",
"notepad" : "/notepad",
"online radio": "/radio/suriname.html",
"html editor": "/tools/html-editor",
"table generator": "/tools/table-generator",
"text extractor": "/tools/text-extractor",
"text merger": "/tools/text-merger",
"text numbering": "/tools/text-numbering",
"text replacer": "/tools/text-replacer",
"bookmark generator": "/tools/bookmark-generator",
"bookmarklet maker": "/tools/bookmarklet-maker"
};

let desc= [
"doctor who",
"drawing",
"link lister",
"notepad",
"online radio",
"html editor",
"table generator",
"text extractor",
"text merger",
"text numbering",
"text replacer",
"bookmark generator",
"bookmarklet maker"
];

let urls= Object.values(list),
texts= Object.keys(list);

for(let i=0; i<urls.length; i++){
let p= "link " + "item" + (i+1),
q= "item"+(i+1);

createLinks(p, q, texts[i], urls[i], desc[i]);

}

</script>
</body>
</html>