درس XF-2.x Grid layout for Thread without addon

[Ibn AliraQ]

السلام عليكم ورحمة الله وبركاته
شرح اليوم هو عرض المواضيع داخل الاقسام بطريقة الـ Grid
اقتباس

Hemant here again with Thread grid layout without Addon. Well after my Grid layout for XFRM without Addon @Neutral Singhsuggest to make grid layout for the thread too. so here it is.
So here a simple CSS that you need to place it in Extra.less that will give it what you looking for.
Note : you need to adjust the max-width: 50Ch; according to your forum layout. Ex : max-width: 40Ch;
this will set the ... according to your width​

/********* Css Grid Code Start ********/
.structItem-title{
    text-overflow: ellipsis !important;
   max-width: 50ch;
    white-space: nowrap;
    overflow: hidden; }
.structItem--thread{
    border-collapse: collapse;
      width: 100%;
    height: auto;
    display: inline-block !important;
    margin: 9px 0px 0px 6px;
    max-width: 49% !important;
    box-sizing: border-box;
    vertical-align: top;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); }
.structItem-cell{width:100%;}
@media (max-width: 650px){
  .structItem-cell.structItem-cell--meta {
    display:none; } }
.structItem-cell--meta{
  display: block;
    width: auto !important;
    margin-top: -13px;
  float:left; }
.structItem-cell--latest{
   display: block;
    width: auto !important;
    margin-top: -13px;
    margin-bottom: 15px;
  float:right; }
.pairs.pairs--justified>dd {
    float: left;
    text-align: right;
    max-width: 100%; }
.structItem-cell--latest{
  margin-bottom:0px !important; }
@media (max-width: 1125px) {
  .structItem--thread {
    max-width: calc(95%) !important;   } }
@media (max-width: 650px) {
  .structItem--thread {
    display: table !important;
    max-width: 100% !important;
    margin: 5px 5px 5px 0px;
    box-shadow: none;     } }
@media (max-width: 650px){
.structItem-cell.structItem-cell--latest,.structItem-cell--meta {
  float:right !important;  }}
.structItem-cell--meta dt{ font-size:0px; }
.structItem-cell--meta dd{ margin-left:18px; }
.structItem-cell--meta .structItem-minor dt:before , .structItem-cell--meta dt:before{
  font-family: FontAwesome;
    font-size: 12px;
    position: absolute;
    margin-left: 0px;
  color:#ababab;
}
.structItem-cell--meta .structItem-minor dt:before {content: '\f06e '; }
.structItem-cell--meta dt:before {content: '\f112'; }

/********* Css Grid Code End ********/

if anyone wants to get the Sticky thread look separate in color Text just paste this CSS below extra.less

.structItemContainer-group--sticky .structItem--thread {
    background: #fff5e8 !important;
  border: 1px solid #f9c479 !important;
}

ملاحظة :
لو اردت : Edit button overlap with text
استخدم الكود التالي :

.structItem-cell--main .structItem-extraInfo {
    float: left;
    margin-left: -8px;
    }