Центрировать содержание статьи в Grid

Question

Я хочу центрировать и равномерно распределять содержимое статей внутри раздела с использованием сеток. Я предоставил изображение, чтобы продемонстрировать, что я пытаюсь достичь. Мне интересно, как можно переписать код https://jsfiddle.net/84o6hbz7/, чтобы получить Ожидаемый или В качестве альтернативы результат.

Любая помощь по этому вопросу будет оценена:

Вот текущий код:

<section class="aboutSectionGrid">
    <article class="aboutList">
        <h2>Technical Skills</h2>
        <ul>
            <li>Development Tools</li>
            <li>Digital Automation</li>
            <li>Gameplay Scripting</li>
            <li>Performance Profiling</li>
            <li>Optimization</li>
            <li>Content Management</li>
        </ul>
    </article>

    <article class="aboutList">
        <h2>Artistic Skills</h2>
        <ul>
            <li>Shaders</li>
            <li>Particles</li>
            <li>Post Processing</li>
            <li>Modelling</li>
            <li>Sculpting</li>
            <li>Texturing</li>
        </ul>
    </article>

    <article class="aboutList">
        <h2>Languages</h2>
        <ul>
            <li>C#</li>
            <li>C++</li>
            <li>Visual Basic</li>
            <li>HTML, CSS, JavaScript</li>
            <li>PHP</li>
        </ul>
    </article>
</section>

.aboutSectionGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
    gap: 0 20px;
    font-size: 0;
    background: crimson;
    width: 960px;
    max-width: 100%;
    margin-bottom: 20px;
}

.aboutList {
    font: 16px/20px "Roboto";
    text-align: left;
    padding: 20px;
    color: white;
}

.aboutList h2 {
    margin: 0;
    padding: 0;
}

.aboutList ul {
    font-size: 0;
    margin: 0;
    padding: 2px 25px 0 25px;
}

.aboutList li {
    font: 16px/16px "Roboto";
    margin: 0;
    padding: 15px 0 0 5px;
}

Answer 1

попробуйте это css

    .aboutSectionGrid {
    display: grid;
   grid-template-columns: repeat(3,minmax(100px,240px));
    gap: 0 20px;
    font-size: 0;
    background: crimson;
    width: 960px;
    max-width: 100%;
    margin-bottom: 20px;
            justify-content: space-between;
}

.aboutList {
    font: 16px/20px "Roboto";
    text-align: left;
    padding:20px 10px;
    color: white;
}

Answer 2

Оберните div вокруг содержимого и добавьте выравнивание текста: центр к родителю https://jsfiddle.net/taimursaeed15/2ngpj97o/5/

.aboutList {
    text-align: center;
}
.aboutList>div{
    display:inline-block;
    text-align: left;
}

<article class="aboutList">
        <div>
            <h2>Technical Skills</h2>
            <ul>
                <li>Development Tools</li>
                <li>Digital Automation</li>
                <li>Gameplay Scripting</li>
                <li>Performance Profiling</li>
                <li>Optimization</li>
                <li>Content Management</li>
            </ul>
        </div>
    </article>

Answer 3

Вместо отображения: сетка, мы можем использовать отображение: flex

css

/*For expected solution from ur image*/
.aboutSectionGrid {
    display: flex;
    justify-content: space-between;
}
/*For alternatively from ur image*/
.aboutSectionGrid {
    display: flex;
    justify-content: space-evenly;
}