How can I center my grid items in my grid columns?

Question

I am building a basic home page for my browser. I have 4 categories of links, so I put them all in a grid to align them easily. I was able to do this, but the grid items weren't centered in each column. I then tried to center the grid items, but it didn't work. I am also using jQuery. Heres my code:

<style>
    html,
    body {
        background-color: #53a8ed;
        color: white;
        font-family: 'Dosis', sans-serif;
        letter-spacing: 2px;
        font-weight: bolder;
        width: 100%;
    }

    #title {
        margin-top: 125px;
        text-align: center;
    }

    #content {
        text-align: auto;
        margin: 0 10%;
        width: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        grid-gap: 15px;
    }

    .contentListWithHeader {
        border: 2px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .contentHeader {
        text-align: auto;
        position: relative;
        top: 0%;
    }

    #school {
        grid-column: 1/4;
        grid-row: 1/1;
    }

    #entertainment {
        grid-column: 2/4;
        grid-row: 1/1;
    }

    #programming {
        grid-column: 3/4;
        grid-row: 1/1;
    }

    #projects {
        grid-column: 4/4;
        grid-row: 1/1;
    }

    .list {
        display: none;
    }
</style>

<h1 id="title">Home</h1>
<div id="content">
    <div id="school" class="contentListWithHeader">
        <h3 class="contentHeader">School</h3>
        <div id="schoolList" class="list">
            <ul>
                <li><a href="https://app.schoology.com/home">Schoology</a></li>
                <li><a href="https://drive.google.com/drive/my-drive">Google Drive</a></li>
                <li><a href="https://plusportals.com/gmhs">Plus Portals</a></li>
                <li><a
                        href="https://owl.purdue.edu/owl/research_and_citation/mla_style/mla_formatting_and_style_guide/mla_formatting_and_style_guide.html">MLA
                        Citation</a></li>
            </ul>
        </div>
    </div>
    <div id="entertainment" class="contentListWithHeader">
        <h3 class="contentHeader">Entertainment</h3>
        <div id="entertainmentList" class="list">
            <ul>
                <li><a href="https://www.youtube.com/">Youtube</a></li>
                <li><a href="https://www.netflix.com">Netflix</a></li>
            </ul>
        </div>
    </div>
    <div id="programming" class="contentListWithHeader">
        <h3 class="contentHeader">Programming</h3>
        <div id="programmingList" class="list">
            <ul>
                <li><a
                        href="">cPanel</a>
                </li>
                <li><a
                        href="">NameCheap</a>
                </li>
                <li><a href="https://github.com/Gbillington1">Github</a></li>
                <li><a
                        href="https://www.khanacademy.org/profile/grahamhbillington/assignments/teacher/kaid_66866897972006194384950/class/4584679721369600">Khan
                        Academy</a></li>
                <li><a href="https://www.udemy.com/course/complete-web-developer-course/">uDemy</a></li>
            </ul>
        </div>
    </div>
    <div id="projects" class="contentListWithHeader">
        <h3 class="contentHeader">Projects</h3>
        <div id="projectsList" class="list">
            <ul>
                <li><a>something</a></li>
            </ul>
        </div>
    </div>
</div>

<script>

    $(document).ready(function () {
        $("#school").hover(function () {
            $("#schoolList").slideToggle("fast");
        });
        $("#entertainment").hover(function () {
            $("#entertainmentList").slideToggle("fast");
        });
        $("#programming").hover(function () {
            $("#programmingList").slideToggle("fast");
        });
        $("#projects").hover(function () {
            $("#projectsList").slideToggle("fast");
        });
    });

</script>

Answer 1

If you wanna use align-items: center; you must use this CSS to grid container. If you wanna use to items of the grid container using align-self: center; You can read more about CSS grid in this wonderful article https://css-tricks.com/snippets/css/complete-guide-grid/