مدیاویکی:RTL-Portals.css

/* portals */
.portal-container-2 {
    display: grid; 
    grid-gap: 25px; 
    grid-template-columns: repeat(2, auto);
    grid-template-rows: auto;  
    width: 100%
}
.portal-container-3 {
    display: grid; 
    grid-gap: 15px; 
    grid-template-columns: repeat(3, auto); 
    grid-template-rows: auto;  
    width: 100%
}
.portal-container-4 {
    display: grid; 
    grid-gap: 15px; 
    grid-template-columns: repeat(4, auto); 
    grid-template-rows: auto;  
    width: 100%
}
.portal-container-5 {
    display: grid; 
    grid-gap: 15px; 
    grid-template-columns: repeat(5, auto); 
    grid-template-rows: auto;  
    width: 100%
}
.portal-container-6 {
    display: grid; 
    grid-gap: 15px; 
    grid-template-columns: repeat(6, auto); 
    grid-template-rows: auto;  
    width: 100%
}
.portal-container-7 {
    display: grid; 
    grid-gap: 15px; 
    grid-template-columns: repeat(7, auto); 
    grid-template-rows: auto;  
    width: 100%
}
.portal-column-2-3 {
    grid-column-end: span 2; 
}
.portal-column-3-4 {
    grid-column-end: span 3; 
}
.portal-column-1-2,
.portal-column-1-3,
.portal-column-1-4,
.portal-column-1-5,
.portal-column-1-6,
.portal-column-1-7 {
    grid-column-end: span 1; 
}
.portal-column-2-2 {
    grid-column-end: span 2;
}
.portal-column-3-3 {
    grid-column-end: span 3;
}
.portal-column-4-4 {
    grid-column-end: span 4;
}
.portal-column-5-5 {
    grid-column-end: span 5;
}
.portal-column-6-6 {
    grid-column-end: span 6;
}
.portal-column-7-7 {
    grid-column-end: span 7;
}
@media only screen and (max-width: 900px) {
    .mainpage-portals {
        width: 25%; 
    }
    /* Decouple the columns on narrow screens */
    .portal-container-2,
    .portal-container-3, 
    .portal-container-4, 
    .portal-container-5, 
    .portal-container-6, 
    .portal-container-7 {
        display: block;
    }
    .portal-column-1-2,
    .portal-column-3-4,
    .portal-column-1-3,
    .portal-column-2-3,
    .portal-column-2-2,
    .portal-column-3-3,
    .portal-column-4-4,
    .portal-column-5-5,
    .portal-column-6-6,
    .portal-column-7-7 {
        float: inherit;
        width: 100%;
        margin-top: 16px;
        display: block !important;
        text-align: center;
    }
    .portal-column-1-4 {
        width: calc(50% - 16px);
    }
    .portal-column-1-6 {
        width: calc(33.3% - 16px);
    }
    .portal-column-1-7 {
    float: right;
    width: calc(25% - 16px);
    }
    .portal-column-1-4, 
    .portal-column-1-6, 
    .portal-column-1-5 {
        float: inherit;
        width: 100%;
        margin: 0;
        display: block !important;
        text-align: center;
    }
}