כדי ליישר את הגריד למרכז את צריכה להוסיף קוד CSS לוידג’ט. בכרטיסיה מתקדם > CSS מותאם אישית > הדביקי את הקודים הבאים לפי הצורך.

יישור ליסטינג גריד של ג’ט אנג’ין למרכז

הכי קל להשתמש בליסטינג גריד של ג’ט אנגי’ן, ולהוסיף לו שורת קוד אחת בCSS, המגדירה לו יישור אוטומטי למרכז:

selector .jet-listing-grid__items{
    justify-content: center !important;
}

יישור גריד פוסטים של אלמנטור למרכז

באלמנטור הגריד מתבסס על css-grid, ולכן הקוד יהיה קצת יותר מסובך.

הכי טוב להחליף את שיטת הגריד לflex, עם הקוד הזה:

selector .elementor-posts-container{
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap;
}

ואז תצטרכי להגדיר בנפרד את מספר העמודות של הפוסטים, ואת הריווח ביניהן על ידי שימוש בהגדרה של flex-basis.
כתיבת קוד עם flex-basis וcalc דורשת ידע מקצועי בCSS, ואני מלמדת אותם בפרקים המתקדמים במסלול האליפות בCSS.

בכל מקרה, אם את רוצה לחלק ל4 עמודות, עם מרווח של 30px בין העמודות, הקוד הבא יתאים לך:

selector .elementor-grid-item{
    flex-basis: calc(25% - 22.5px) !important;
}

ברגע שבחרת להשתמש בקוד CSS, חלק מההגדרות באלמנטור לא יעבדו לך, כמו בחירת מספר העמודות, ובחירת הריווח בין העמודות. ולכן תהיי חייבת ליצור התאמה רספונסיבית לטאבלט ומובייל על ידי קוד CSS. השיטה המדוייקת להתאמה רספונסיבית של קוד CSS נמצאת גם כן במסלול האליפות בCSS.